Show and hide interaction looks glitchy

[bwalls1992 (brad.walls92@gmail.com)]

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

And a screen of the settings

Preview link: https://preview.webflow.com/preview/inkfndry?preview=26bcfd6d07cd5a400b5b3f8d2e097811

[vincent (Webflow Expert)]

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.

[bwalls1992 (brad.walls92@gmail.com)]

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?

[AlexN (Alex Nichol)]

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