ScrollTrigger Best Practices

[AdventurousDeveloper]

Hey GSAP fam!

 

Sorry if this type of question has been asked before or an obvious thing...

I've started to build a lot of my client websites using GSAP + ScrollTrigger. Generally a page template would have multiple individual content sections that make use of their own ScrollTriggers and animations etc.. Currently I set each section scrollTrigger to be triggered at the top of a section element and end at the bottom of the said element. This means some pages can end up having 5+ seperate scrollTriggers on them. 

 

Rather than my approach above, I am wondering if it is considered best practice to create a master timeline and then use add() to add all my scrollTriggers to it? I guess this would offer better control positioning etc..?

 

Any advice would be greatly appreciated!

 

Cheers,

[GreenSock]

3 hours ago, AdventurousDeveloper said:

Rather than my approach above, I am wondering if it is considered best practice to create a master timeline and then use add() to add all my scrollTriggers to it? I guess this would offer better control positioning etc..?

Definitely not. In fact, that's one of the common mistakes

 

You can't have multiple ScrollTriggers inside one timeline. It's logically impossible because the scrollbar -OR- the parent timeline's playhead can control the animation's playhead, not both. 

 

It's tough to offer advice without a minimal demo but you shouldn't be afraid to have 5, 10 or even more ScrollTriggers on one page. It's optimized for performance already.  

 

Enjoy!