Jump to content
Search Community

ScrollTrigger breaks after page resize

Oleksandr07 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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. 

Link to comment
Share on other sites



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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...