Setting up Webflow interactions confuses me a little bit. I’m used to timeline-based animation, where you can see multiple keyframes on multiple properties in parallel.
Parallel anim with IX2 doesn’t really work like this
To begin with, if you want to animate from a state to another, don’t use “With previous” with a delay. You need to set a new step using “After”.
Also, for maintenance and stability, predictability, prefer using different targets for different actions: set the filter anim on the image, and set the scale anim on a container of the image, like a div.
Now, when you have parallel anims that are on a different pace (2sec for the filter and 1 sec + 1 sec for the scale), you kinda need… 2 interactions. And 2 interactions set on different element (again, the filter on the image and the scale on a div).
I get the logic, and if you reproduce this in Keynote using the exact same kind of timeline, it will work. It just doesn’t work on Webflow IX2.
You can remove all the filter anims and your scale anim won’t even work, it’s not because or the parallel, it’s because of the “With previous” with a delay.
Thanks for that. I split the hue and scale into two animations. It wasn’t necessary to apply them to different elements. https://io-butterfly.webflow.io/
Cool. I guess in this case it works as expected. But more often than not, targetting the same element with different IX is a recipe for something funny