Animation not working

I have an animation that is supposed to size and hide/show a top, bottom, left and right div blocks. When I play it from the animation panel it works, but when I go to the preview or the published site only the top and bottom divs work correctly.

The right and left divs are fixed positions, sized to 70px and have a z value of 2 (like the top and bottom divs).

Thanks for any suggestions!


https://preview.webflow.com/preview/fairfield-foursquare?utm_source=fairfield-foursquare&preview=f33757473604c0a77b4b8dc16875c3d8&mode=preview

Hey Matthew, welcome to the forum!

You have some conflicts in the interactions. On both (hover & click) interactions you have an initial state :scream:

Once you remove the click interaction’s initial states, the hover interaction works.
Find a state for your elements to be in (styled, instead of ‘initially stated’ with interactions) and then you won’t need the double initial state.

That fixed it! I copied the right and left div blocks and created a combo class for the click interaction. Thanks so much for your help!

1 Like

Hello, hopefully I’m not too late to get help with the issue I’m having the same one. I have a piece of text that I’m trying to target with two animations. One of them has a piece of text fade in on page load, the other fades it out on page scroll. I have copied the animation setting for setting from a template, so I don’t understand what is different. I tried to use the solution of @avivtech above (I duplicated the text elements and gave one a class of ‘text 1’ and the other ‘text 2’, and then used a separate animation for each, but that didn’t work. I’m probably not interpreting the solution properly. I would appreciate any pointers! Thanks

https://preview.webflow.com/preview/the-berg-design?utm_medium=preview_link&utm_source=designer&utm_content=the-berg-design&preview=91c9062ddd3222d634b69dca1276b6da&pageId=6171d193e2353425a0202ee3&workflow=preview