Streaming live at 10am (PST)

Show/Hide panel animation is abrupt. How can I smoooth it out?


#1

Hi there,

I’ve set up a show/hide animation on the Services > Motor Vehicles page of this site.

Clicking on the info icon opens the panel and then closing on the close icon closes the panel.

Now I want to make this animation smoother so the panel slides open and closed vs just appearing/disappearing. I’ve searched the community forum and Webflow tut videos, but haven’t found the solution.

Here is my public share link: https://preview.webflow.com/preview/vital-registry?preview=56ecf14692f638460d432a235b840cda

Any help would be greatly appreaciated!

Marc


#2

Hi @marcbaskin,

Yes you could do this but you would need to do a custom drop down with interactions.

The structure will look like this :
07

1 - Custom dropdown is the container for layout purposes
2 - Select a motor is the dropdown button/toggle used for opening and closing the dropdown
3 - Motors link list is the actual dropdown menu with the links within it

The most important thing for this to work is to leave the height of the Motor link list to auto in the designer.

Then in an interaction you can add an initial state of the height being 0px with the miscellaneous size animation.

Then just add an animation of size height with the duration and easing of your choice set to auto


(if you don’t set the height to be auto in the designer before being handle by interactions you would probably experience some buggy behaviour)

Also make sure the motor link list has is overflow property set to hidden.

You can then set up another interaction for closing the dropdown (without initial state) and setting back the size to 0px height.

You can set the open and close interaction to first click and second click of the select a motor element and also add the close interaction to first click of a link if you want the menu to collapse when a link is selected.

I hope it makes sense and will help you with your design.

Max


#3

@Maximosaurus got it working perfectly. Thanks for your help!