Dropdown menu and animations

Design help Animations & Interactions
1

Hi!
I’m experimenting with animations in a dropdown menu but I’m having some issues. First, I added a mouse hover animation to the dropdown to open and close with an easy out (quart) but in the preview the animation is not working.
Second, I have a second animation inside the dropdown, with a mouse hover on the Nav/link to show and hide a line, until here the animation is working but is not working on the children elements. I already checked that they are under the same class and style but yet I can only make the animation work on the first element.
Maybe my mistake is adding to many animations and elements to the dropdown and that’s why is not responding how I want it to, or I’m missing something. I’m new with Webflow and will appreciate your insights :slight_smile:

Here is my public share link:
https://preview.webflow.com/preview/company-groovy-site?utm_medium=preview_link&utm_source=dashboard&utm_content=company-groovy-site&preview=46707ed8b9277ce9d494832661e6b42e&workflow=preview

2

Think I figured it out — try these steps:

  1. Go to your “dropdown section” in the left-hand layers panel… then go to the Interactions tab (upper right).
  2. Under mouse hover > on hover > Line hover on start. Click settings gear. For “div line menu” change “affect” to “class” instead of “selected element” at the bottom. Then — important — in the dropdown select “only children with this class.” Click “Done.” Do this for both the initial state div line and the second one.
  3. Under mouse hover > on hover OUT > Line hover on end. Go Click settings gear. For “div line menu” change “affect” to “class” instead of “selected element” at the bottom. Then — important — in the dropdown select “only children with this class.” Click “Done.”

let me know!

3

HI @drew-eastmead! Thanks for your advice :slight_smile: Actually, I tried this and it didn’t work so as an alternative I added the animation for every section individually, so that is why is currently set for the selected element. I think I’ll try to build it again and see if I can make it work.