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: Webflow - Vital Registry
Any help would be greatly appreaciated!
Marc
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 :
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
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
