Show and hide interaction looks glitchy

Design help Animations & Interactions
1

Im using the tuotial found here: https://www.youtube.com/watch?v=r9klhrbuj1Y

However there are 2 things happening that arent in the tutorial

  1. the toggle transition looks glitchy, i can see other elements behind as it returns to display none
  2. the click transition is way too quick yet it is set to 1000ms ease

Here is the gif

960Ă—540 1.11 MB

And a screen of the settings

1919Ă—940 193 KB

Preview link: Webflow - Inkfndry

2

Typical issue, easy to fix.

Your element shrinks to zero, then disappear. But you have added either padding or margin to the element, which doesn’t count for it’s height. So when it’s zero, it’s still the height of the margin or padding, then it hides. So there’s your glitch.

So, good practice : when you do reveal/hide interaction, add a special container to do that and don’t put any styling on it. Apply your margins and paddings to the elements inside it.

So add an extra div around all your things, and target it for the interaction instead of the one that has pad/marg.

3

Thanks @vincent

I have done that and wrapped it in an unstyled div named “brief holder” and applied the interactions however it still appears to be see through…

Any ideas?

960Ă—540 712 KB

4

You will want to set the overflow on that element to hidden.

2 Likes
5

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