GSAP Observer Marquee with Lenis

[By Huy]

Hello everyone,

 

As this is my first time using GSAP, I'm having quite a bit of trouble getting the scroll velocity logic for the marquee right.

 

At the moment the logic sort of works but it doesn't really work as I intended as there is an abrupt stop as soon as you stop scrolling and then it continues the looping animation at a normal speed which sort of breaks the seamless speed scroll.

 

Would also be happy to get any other feedback on improving my GSAP code, it feels like I'm just hammering away at the code while reading the docs and it just happens to work a little. 

 

Any other questions I would be happy to answer!

 

See the Pen VYZvZPr by cheesezzzz (@cheesezzzz) on CodePen.

[GreenSock]

Are you trying to do something like this?: 

 

See the Pen QwLybdz?editors=0010 by GreenSock (@GreenSock) on CodePen.

[By Huy]

1 hour ago, GreenSock said:

Are you trying to do something like this?: 

 

 

 

This is exactly it, just to understand a bit more about the code since they way you've implemented looks so much more efficient.

The main difference here would just be using the quickTo() function so that it calculates and update the velocity in real time right? 

Thanks so much Jack, this has been a great help.

[GreenSock]

A few key concepts: 

1. You wanted the speed of the effect to never dip below the "normal" speed (which is a timeScale of 1), thus I just added the "faster" scroll-based speed to 1 so that when scrolling velocity reaches 0, the timeScale is 1. 
2. gsap.quickTo() is specifically made for animations where you keep updating the "to" value over and over again, like a mouse follower or whatever. Basically when you find yourself creating a new tween over and over again, with overwrite: true. This is a more efficient way to do that. 

Does that clear things up? 

[By Huy]

On 12/6/2024 at 7:38 AM, GreenSock said:

A few key concepts: 

1. You wanted the speed of the effect to never dip below the "normal" speed (which is a timeScale of 1), thus I just added the "faster" scroll-based speed to 1 so that when scrolling velocity reaches 0, the timeScale is 1. 
2. gsap.quickTo() is specifically made for animations where you keep updating the "to" value over and over again, like a mouse follower or whatever. Basically when you find yourself creating a new tween over and over again, with overwrite: true. This is a more efficient way to do that. 

Does that clear things up? 

Yes, makes sense! Thank you, again.