2 Roadblocks: Click interactions and Images hover

Design help Animations & Interactions
1

I have two problems, which I’m sure the expert Webflow community can help me out with or give me a steer:

I am working on a site that is part built off a Webflow template and part custom built.
The issues are these:

1 - On the What We Do page, I’ve made 6 services icons that expand their own individual windows. They all work fine and all click on to the next in a Clockwise fashion. However the UX is diminished when you decide to click the last Signage icon first and move back to other service icons. Is there any way to prevent this? I know you only ‘first click’ or ‘second click’. any ideas on how to get around this?

2 - The Workbook page. This is essentially taken from template. It works great (hence is why we’re using it) however (and this feature is actually on the Webflow template) there is a large gap around the bottom left image and under the bottom right image. It only really appears when you stretch out the screen to 27" but it would still be nice to try overcome it. I have tried playing around with image sized but it is not this, rather something else in the row/columns set up that is leaving this gap there. When you over the images, the gap is filled.
any help would be appreciated.

Here is my public share link: https://webflow.com/website/bammedia?s=bammedia
(how to access public share link)

2

  1. Any of the six action should cancel whatever previous icon did before showing the appropriate section, that the good route to follow. Relying on the fact users will click icons in order is not realistic I’m afraid :slight_smile:
    So you got to remove the second click on any of the icons, you don’t need a second click to hide the panel here. Instead, make the unique click fade out and hide all existing panels first, THEN show the appropriate one. That way visitors can click where they want in the order they want (because that’s what they’ll try to do).
    Additionally, the icon should be a link and on top of the interaction you should target the section where it shows the panel, or visitors on small screen will never have a clue what’s going on when they click and icon.

  2. under the overlay element, the image should be a background of the ROW column, set to poster, then you’ll get rid of any margin.

3

Hi Vincent, thanks for your response. I’m just trying to comprehend your advise here.

When you say “remove the second click on any of the icons, you don’t need a second click to hide the panel here.”
effectively is that remove the second click from all icons surely?

“Instead, make the unique click fade out and hide all existing panels first, THEN show the appropriate one.”
when you say ‘unique click’ what do you mean by this? can you explain this step a little better? am I telling all other sections to displaynone??

sorry, appreciate the advise. just a bit confused!

4

No other suggestions on this and even though I’ve tried (I think) what you’ve suggested Vincent, it still does not click/show/hide in multi directional.
At this stage, I may need to look at a JQuery script to try get this functionality working. Would appreciate any other suggestions.

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.