Smooth out custom dropdown interaction

Design help Animations & Interactions
1

read-only link: Webflow - WRAPUSA

I’m in the process of designing a mega menu for my project and have it almost exactly how I want it except for the animation of the opening a close of the dropdown. As you’ll see in my read-only link the dropdown does not appear to slide in and out of sight smoothly, it’s rather jerky and unappealing looking.

I’m rather new to creating my own interactions so I’m sure there’s a better way of creating the slide out that I’m not aware of. Any assistance with improving my interaction would be much appreciated.

As a side note, if you see any other glaring issues with my site I’d be very open to constructive criticism/ simpler ways of doing things. This is my first huge paid project using Webflow so I want the site to be as close to perfect as possible. Thank you so much!

2

The animation is jerky because the folding animation is made with varying the height, before hiding the element.
But the element has borders, and borders don’t account in height, such as padding, margin etc.

#1 rule of folding/unfolding is to make it happen on an element that doesn’t have margin, padding, borders… If you want decorations, make them on elements that are inside the main one.