Hello everyone,
I am having an issue animating a div multiple times “while scrolling in view”. Specifically, I am trying to create an animation of a circle representing a car, where the car is moving on the x-axis, approaches a red traffic light, waits a little bit and then starts like a race car. Here are the animation details:
First animation: The circle moves from -500 px to 0 px on the x-axis with an easing setting of “ease out expo” to represent a smooth approach / braking at the traffic light.
For some percentage of scrolling, the circle stays at position 0 px to simulate the car waiting at the traffic light. So far so good and clear.
Second animation: The circle moves from 0 px to 500 px on the x-axis with easing setting “ease in cubic”, simulating the car starting like a race car. However, no matter what easing setting I choose for the second animation, the first easing setting is always used for the second animation.
I have tried different approaches to solve this issue (creating this setup multiple times / in a new page, animating the whole class, animating just the specific element, using extreme custom easing settings to ensure that I do not judge the animations incorrectly…), but it seems that every div can only have one easing setting that is used for all animations of this div.
Can someone confirm if this behavior is “works as designed” or if it is a Webflow error?
Thank you!