Rotating SVG elements depending on the scrolling

[ainzon]

Hi,

 

I have a question about optimizing the code I created for that animation.

 

I use the same code 3 times to achieve what you can see in codepen. I already tried to simplify that code with a timeline with no success. The problem was that only the last circle was rotating.

 

The goal was to start the rotations with an delay. So the second should start later than the first and so on - but I couldn´t achieve that. But with the fade it looks like it does.

 

I´m also not sure if my startValue and endValue - variables are so smart or if there is a better way. Is there a possibility to say that the start should be at the top of the element before and the end should be at the end of the element after?

 

Side note: I´m also not 100% happy how the circles fade in - is there a smoother way or is it just my bad timing? I should ensure that the fading is done before the user scrolls away...

 

Still learning.

 

Thanks for your help!

See the Pen wvjLpvy by boris-andraschko (@boris-andraschko) on CodePen

[mvaneijgen]

When working with GSAP I would always start with using a timeline. You almost never want to animate one thing and if so you can always optimize it later. Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

I would also always gravitate to using just one ScrollTrigger, this also makes it really simple to disable it to view just the animation.

 

I've add some comments in the code to explain my reasoning, hope it helps. Also there are some great resources out there, personally I like video content. So check out these:

https://www.youtube.com/c/GreenSockLearning/videos

https://www.youtube.com/user/snorklTV/videos

 

See the Pen eYrqJXm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[ainzon]

@mvaneijgen - thank you so much for your tips!

 

If I see the final code it always looks so obvious...