Making a sticky element rotating while in view

Hello!

I am trying to make this circle with an eye inside (see screenshot) rotate during the whole section. This element is a image that I nested into a div. The div is set on sticky.
I tried with the rotate animation and custom code but I do not manage to make this big icon rotate.

I am starting to think that its sticky position collides with the animation.

Can somebody throws some light here? Would be super nice!

Thanks a lot


Here is my public share link: Webflow - Elenas test project

Great question @LNA_BLN :smile:

When using a while scrolling animation, it will need to be applied to content that is scrolling to achieve the desired outcome (in this case the eye is sticky to the top of the page and is not scrolling).

I made a quick video walking through how to achieve this with your interaction:

I noticed a little bit of horizontal scrolling occurring which was due to the left-margin style on the div block 90 wave element. If you set that to 15% padding instead of margin, it should prevent the horizontal scrolling:
Shared with CloudApp

Please let me know if this is helpful or if you have any additional questions.
I’m happy to help you further!

Hello Waldo,

thanks you really much, it works like a charm! I am still trying to understand the logic behind making the parallel element scroll though :sweat_smile:

All the best

1 Like

ah sorry, just re-read your message, and it’s clear now! I was a bit sleepy yesterday :wink: Thanks again!