Streaming live at 10am (PST)

Problems with animation

Hello Webflow folks,
I am trying to create an animation on scroll where the leaves of this image ‘grow’. I have finally got the elements into the right position after much experimenting with absolute and relative positioning etc. I tried to give all the leaves the same Class but Webflow wont let me do that. It says Class 'Already Exists" when I try that, so instead I have tried duplicating the animation and then repeating it for each leaf. After many attempts and setbacks I have got the top 2 leaves to behave how I want them to, but now the bottom right leaf has moved position and its rotation angle is off. I am probably doing this all wrong, it would be very much appreciated if someone could point me in the right direction. Here is an image of how it is supposed to look after the animation has finished.

Here is my public share link: LINK
(how to access public share link)

You’re on the right path.

Hey Vincent, thank you for the reply. I missed the anchor point on that leaf…that explains it.
The words ‘your on the right path’ sound sweet-it is a steep learning curve. Any idea why it wont let me choose the same Class for each element?



What you can try is a bit special: reverse the combo.

You have your unique classes on which you’ve defined the original position of each leaves. keep it that way. But remove the class from each leave temporarily. Then set the same class on each, called for example leaf-common, and set on this class only the transform property that you’re going to use in your IX. Then keep that class on each leaf and add the unique class as a combo to this one. So you have for example “.leaf-common .spring-leaf” as a combo. Now remove the transform property set on the common class from the unique classes. in your IX, target only the leaf-common class and target the class.

Do a backup before trying this.

Thank you Vincent, I will try that.

I have tried this but when I remove the Class the element/image disappears.