How can ScrollTrigger affect speed of existing infinite animation? (w/ React demo)

[LevFokichev]

Hi there,

I've been learning and really enjoying GSAP! Thanks for the wonderful docs, learning materials, and forum.

I want to create an effect of an infinitely moving horizontal line, which moves FASTER or SLOWER in reaction to scroll.

So passively, let's say the line scrolls at "duration 5".

- If I scroll down, I want the line to move faster, e.g. at duration 5 - adjusted scroll velocity = 2.

- If I scroll up, I want the line to move slower, e.g. at duration 5 + adjusted scroll velocity = 8.

Here's a minimal demo of both effects individually, but I haven't been able to successfully combine them. I've tried to manually adjust the duration variable through ScrollTrigger's onUpdate, using "getVelocity()", but that didn't seem to work. I've left it blank in the demo.
If someone could point me in the right direction of how to approach this, I can try to do it in the demo myself! Thanks again.

 

(not sure how to embed stackblitz demo directly)
https://stackblitz.com/edit/react-ejg7zb?embed=1&file=src%2FApp.js

[Rodrigo]

Hi @LevFokichev and welome to the GSAP Forums!

 

You're looking for the Horizontal Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Here is a demo that uses it on React in combination with the Observer Plugin to change direction and speed based on the mouse wheel:

https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx

 

https://gsap.com/docs/v3/Plugins/Observer/

 

Finally, there is no way to embed Stackblitz demo, so sharing the link is good enough 👍

 

Hopefully this helps

Happy Tweening!

[LevFokichev]

Hi Rodrigo,

Thank you so much for your help, that's exactly it! That demo was super helpful. My modified version, if anyone ever stumbles on this:
https://stackblitz.com/edit/react-qfjtd5?file=src%2FApp.js

 

I opted to keep rendering the line twice instead of breaking the text into words, as that feels weirdly more efficient to me? Who knows!

Thanks again, have a great rest of your week