ScrollTriger not working smoth

[panamera]

Hello,

i have a problem with my animation. If I scroll very fast, many animations are not really visible or it do not work. 

And i don't know, how to add a second trigger Animation for another .class

Can anybody help me to resolve my issue? 

Thank you

 

See the Pen XWVLrMp by Payam (@Payam) on CodePen

[PointC]

Hi @panamera 

 

You currently have toggleActions and scrub on this, but you can't have both. I assume you want scrub so that's what I did in my fork. Your trigger was set to start at top top and end at bottom bottom but the trigger was/is 100vh in height so those happen at the same time. I set them to center for clarity. See how the scrub works properly now?

 

See the Pen a3ba3dccfc969f6e3d1b2e5248c19e3d by PointC (@PointC) on CodePen

 

You'll be able to shorten that timeline a whole bunch by using a stagger. 

https://greensock.com/docs/v3/Staggers

 

GreenSock also has SplitText as part of Club GreenSock so you may want to take a look at that as well.

 

Hopefully that helps. Happy tweening.

 

[panamera]

Thank you @PointC

But if i scroll fast to the top, the navigation is very fast and the animation is not ready visible.

Can i create a second scrollTrigger with a Timeline? I want to use many Triggers for different elements.

 

Best regard 

[PointC]

8 minutes ago, panamera said:

But if i scroll fast to the top, the navigation is very fast and the animation is not ready visible.

I'd recommend using a "linear" or "none" ease with scrub. If you don't want it tied to the scrub, you can remove that and go back to toggleActions and a specific duration.

 

9 minutes ago, panamera said:

Can i create a second scrollTrigger with a Timeline? I want to use many Triggers for different elements.

Yes - you can have as many ScrollTriggers and timelines as you like. Give it a try and we can help if you get stuck.

 

Happy tweening.