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!
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:
Please let me know if this is helpful or if you have any additional questions.
I’m happy to help you further!