ScrollTrigger breaks after page resize

[Oleksandr07]

Please help me figure it out.

If you scroll to the end of the page and resize the page, the start positions of the timeline are determined incorrectly.

See the Pen VwGQpPN by Oleksandr07 (@Oleksandr07) on CodePen

[GreenSock]

Hi @Oleksandr07 There are a few problems:

1. You ran all your calculations only when the page loads and you're baking those values directly into all your ScrollTrigger start/end values. 
2. You're using trigger elements that are INSIDE a container that's getting pinned. Typically all you'd need to do is define the pinnedContainer, but it looks like you're actually trying to use logic that would be problematic because the trigger elements wouldn't hit the top of the viewport until the container element is unpinned and you scroll further. 
3. You're using a lot of extra code and I think we can simplify things.

Don't worry, ScrollTrigger is super flexible so we can accomplish what you want. Basically, it seems like you want the first ScrollTriggered image to get triggered when the container gets pinned, and then each subsequent one is just one additional heightAccordionList. So we can use function-based start/end values that are based on the main pinning ScrollTrigger's calculated start value: 

See the Pen WNgzpyo?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Is that better? 

 

This way, all the adjustments are totally dynamic and get recalculated whenever you resize. 

[Oleksandr07]

2 hours ago, GreenSock said:

Is that better? 

Yes, there are no problems when resizing the page, but in this version, the animation of the text on the left generally does not work correctly

[Rodrigo]

Hi,

 

IMHO I think you  are engineering this.

 

This approach is far simpler and saves you all the troubles of the calculations/layout you're experiencing right now:

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

 

Hopefully this helps.

Happy Tweening!

[Oleksandr07]

Thanks, that helped me. Although I didn't really understand how it works here 🙃

[Rodrigo]

Hi,

 

I'm just creating a single timeline and looping through all the elements you want to animate and I'm just pinning the entire section. In your original approach you're creating a ScrollTrigger instance for each element you're animating (in the loop you create there).

 

Since I'm just using a single timeline and ScrollTrigger instance for everything, there is no need to run any calculations. All the elements are there when the timeline (and i't ScrollTrigger) instance is created, so the normal flow of the document is enough to sequence everything right. Then ScrollTrigger refresh mechanism does the heavy lifting for us 💪

 

Hopefully this clear things up.

Happy Tweening!