scrolltrigger + lenis does not work correctly 😦

[choma03]

When scrolling down, there is a movement along x to the left as it should, then the movement stops when we finish scrolling down. but after stopping the scrolling down, by inertia another movement to the left along x occurs. There is no such behavior when scrolling up. Help me please

See the Pen oNOLxbE by choma-og (@choma-og) on CodePen

[Rodrigo]

Hi,

 

I've read your post a few times and checked the demo and honestly I don't see where is the issue here, everything is working as expected, maybe I'm missing something here 🤷‍♂️

 

If you could be a bit more explicit about what is happening that you don't want to happen we'll be able to provide some help.

 

Happy Tweening!

[choma03]

I work on mac os and I have this problem. you can check on mac os ?

[choma03]

 

how to configure so that when the scroll ends, the scroll trigger animation ends at that moment /

[GreenSock]

I've tested on my Mac and I don't see what you mean, sorry. 

 

Your code seems quite inefficient to me. This is a bit better, although it could be further optimized:

See the Pen xxeOjLZ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Make sure you overwrite previous tweens so you're not continually creating new conflicting ones that are fighting for the same property. And a modifier is better than an onUpdate for what you're doing. 

 

Are you saying that when you scroll all the way to the bottom of the page, you want your x animation to suddenly stop? 

 

Does it work the way you want if you REMOVE Lenis?  That's not a GreenSock product, so we can't really support that. I think the whole point of Lenis is that it'll smooth the scroll so that it doesn't suddenly stop, so I wonder if what you're asking is more of a Lenis question, not a GSAP one(?)

[choma03]

I don’t know, I just want to learn how to do a scroll like this
https://newfolk.jp/about/

[Rodrigo]

Hi,

 

That is not the simplest thing to achieve. I would strongly recommend to get things working without ScrollTrigger/Lenis first. Get the animation working as expected first and then plug ScrollTrigger back into it.

 

Also I would recommend using the Observer Plugin for something like this. Here is a demo that works in a similar fashion:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen

 

Also take a look at this guide @mvaneijgen wrote about masking:

 

Happy Tweening!