Interactions: animating properties in parallel

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.

Expected: I want the image to scale up and down smoothly, in parallel with the filter animation.

Actual: Scaling from 1 to 1.05 is smooth, but scaling back from 1.05 to 1 jumps: it does not seem to tween at all.

Is there something I’m missing?

  • Each hue shift is duration 2.
  • Each scaling up is delay 0, duration 1.
  • Scaling down is delay 1, duration 1.

Parallel anim with IX2 doesn’t really work like this :smiley:

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/

image

1 Like

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 :slight_smile: