Scrolltrigger multiple sections / timeline

[MD81]

Dear GSAP Pros,
I ran into an issue, where a ScrollTrigger should trigger the start of a timeline which was declared before. 

 

The Problem:

The animation timeline is a bit complex (but simplified in the CodePen example) and should affect multiple elements in multiple sections.

I created a loop, so that each of the elements would get triggered at it’s correspondending scroll position. But all instances are still triggered at the same time.

I guess the problem is the timeline, which was declared outside of it. On the other hand I can’t get it inside the loop.

I would appreciate any help!!

Thanks a lot!!! 

See the Pen VwjYryM by mdillgen (@mdillgen) on CodePen

[ZachSaucier]

Hey MD81. You're making one of the most common ScrollTrigger mistakes: using one ScrollTrigger or animation for multiple "sections" when you should create a different animation for each section. You should be creating a different tlFeature timeline in your forEach loop that has targets restricted to that section and use that timeline as your target of your ScrollTriggers.

 

Side notes:

• You don't need two ScrollTriggers per section here. Just use one ScrollTrigger.
• It's better to attach the timeline to the ScrollTrigger instead of using callbacks like you are if possible. You can do so by using the animation property of ScrollTrigger.
• staggerTo and staggerFrom have been depreciated. We highly recommend using the stagger property instead.
• We also highly recommend putting the duration inside of your vars parameters. Doing so lets you use GSAP 3's defaults features and it's more future-proof. Not doing so is one of the most common GSAP mistakes.
• Do you really need the += in the yPercent .set() call?

[MD81]

Thanks a lot @ZachSaucier

ok, I already thought about creating seperate timelines. I’ll try to fix it. Thank you!!!