Is this animation possible in Webflow? [GIF]

Design help Animations & Interactions
1

Hi,

I would like to have a slider where the circles move vertically based on which button the user clicks on. Here is a gif of the effect:

4xs7oz

My idea is to create a lottie animation that has 4 frames (because there are 4 buttons). And then I would use Webflow interactions to set the lottie to 0-25-50-100% based on the buttons pressed. Is this possible this way?

Thanks in advance,
Peter

2

Most probably yes.

However this use case always seems simple, but issues often happen when you start to build the IX. Step by step and ranges animation with lottie and Webflow IX is trickier than it seems sometimes. My advices is:

  • test it right now with the most simple lottie file, even one you grab from lottifiles.com
  • be prepare to have to achieve your range anim using 4 lottie anims (one for each range) and possibly also several IX. The IXs will not only play the segments but also show/hide them.
3

Thanks for the answer. Sorry, but I couldn’t figure out what Webflow IX means.

And I tried what you suggested so that I managed to set the buttons to set the lottie to where I want. However, when I go to 75% to 0% (3rd button to the 1st) the animation is twice as fast as from 75% to 50%. This is completely understandable, but I would like to solve this. Do you have an idea?

Thanks

4

I’m sorry I should not take that for granted. Webflow IX refers to Webflow Interactions. And most specifically now, Webflow Interactions 2.0 (the previous one is renamed Legacy).

So designers here will say “an IX” meaning one interaction, or “Webflow IX” meaning Interactions 2.0.

The vocabulary is pretty specific inside of Webflow IX2. You start with an element, you affect a Trigger to it, then define an Animation for the trigger and build the animation with Actions. All of this compose an interaction.

The speed matches the distance in your vertical timeline… so maybe place your actions differently. I’m sorry I would have to really play with it to solve it :slight_smile:

1 Like