[ScrollTrigger] Pinned section affects the subsequent timelines

[theob]

Hey guys!

 

First of all, I'd like to thank you for this impressive job with the GSAP. It's a master piece.

 

My question is about a possible limitation in ScrollTrigger.

Depending on the order I create the timelines, my animation starts at different positions.

It seems to be related to the extra space that ScrollTrigger needs to add on the pinned section. 

 

The CodePen I attached should better illustrate the case.

In the expected scenario, the start-floating-object marker should be positioned at the top of the green section.

 

Thanks in advance,

Theo

 

See the Pen oNxMqqm by theob___ (@theob___) on CodePen

[ZachSaucier]

Hey Theo and welcome to the GreenSock forums. We're glad you like GSAP!

 

7 hours ago, theob said:

Depending on the order I create the timelines, my animation starts at different positions.

It seems to be related to the extra space that ScrollTrigger needs to add on the pinned section. 

This is the way it should be and your reasoning is correct. Most people expect ScrollTriggers positions to be affected by ScrollTriggers earlier in the DOM. Otherwise a really long pin section could throw off a bunch of positions. 

 

ScrollTrigger has a refreshPriority property that you can use to order your ScrollTriggers if you don't want to create them in the order that they flow in the DOM. So in your case if you add refreshPriority: 1 to the ScrollTrigger within the createSection1PinTimeline function it will work as you want it to.

[theob]

The refreshPriority did work here! 👌

 

Quote

Most people expect ScrollTriggers positions to be affected by ScrollTriggers earlier in the DOM. Otherwise a really long pin section could throw off a bunch of positions. 

I need to think about that to better understand your point.

 

Thank you very much, Zach!