Rotate Elements Based on Scroll Speed: Adjusting Rotation to Scroll Velocity

[kirti]

Hi community! I'm new here and wanted to explore the power of GSAP. I want to replicate the 3 images rotating on this site through GSAP. I've got a working Codepen. However, in my code pen, the images are not linked to the speed at which the user scrolls, as seen on the demo site. I was able to slow it down to make it close enough, but the images need to rotate 360 degrees, and the rotating speed is dependent on how fast the user is scrolling.  I was thinking of using the .getVelocity(): method, but I could use help setting up my function. 

 

Demo site: https://www.andrewleguay.com/

Codepen: 

 

 

Any help will be appreciated, thank you!! 🙏✨

See the Pen QWXVVbr?editors=0010 by keertea (@keertea) on CodePen.

[mvaneijgen]

Hi @kirti welcome to the forum!

 

Why not a timeline and animate all the boxes at one, so that you also only have to add one ScrollTrigger. The demo site you link seems that the items are also just connect to the scroll with scrub: increasing the value will only delay the connection, so setting it to true seems like the most logical solution. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

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

 

If you want it to be independent of the scroll you could look in to this demo. Hope it helps and happy tweening! 

 

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen.

 

 

[kirti]

@mvaneijgen

Thank you so much! It makes sense, but I'm having a little trouble understanding some parts. The main idea here is that instead of applying scrollTrigger to individual boxes (what I had before), you applied it to the whole group, which makes sense. And the timeline creates the animation which then gets connected to the scroll

 

I see your note asking me to change the srub value to a number, but it doesn't give me the desired effect. It just slows the animation down and delays it. In the demo site, the rotating is mapped to the scrolling. So, as the user scrolls down, it turns, and vice versa on the way up. In my codepen, it seems to be spinning a lot and then it's very slow on the way back.

 

Now, I'm new to JS/GSAP and wanted to understand the syntax better. Why not write it like this, like in this tutorial with one timeline tween and from() methods underneath?  https://youtu.be/L2BsDjK03B4

 

also, what does the clamp do? I've never seen that before.


 

Thank you!! 

[mvaneijgen]

I don't really see it slow down, but there is an ease set "power1.out" which means it slows down at the end and will be reversed when scrolling back, so setting ease: "none" will most of the time be more desirable when using a scrubbed timeline.

 

There are several ways to write tweens, I though this to be easy to understand and doesn't create unnecessary amount of ScrollTriggers, but yeah @Carl is a great teacher, so really pays attention to how he works! 

 

Here a video how clamp works. Hope it helps and happy tweening!