Jump to content


ScrollTrigger not snapping when scrolling

Go to solution Solved by mvaneijgen,

Recommended Posts

For some reason this codepen from the docs: 

See the Pen KKpLdWW?editors=0010 by GreenSock (@GreenSock) on CodePen

 does not seem to work in my case as when it's suppsoed to snap the next element, it 

I stripped it as much as possible and the issue persists as you can see in the codepen, the only issue I can think of is css but what am I doing wrong here?

See the Pen vYRVvpb by nicvh (@nicvh) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @nicvh welcome to the forum!


In the demo there are only four panels and you've got eight, so you either have to update the value to eight or calculate how many panels there are and use that as the value. 


See the Pen ExEdrNG by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you @mvaneijgen that works.


Why do I have to create 2 ScrollTrigger per article to make this work?

My issue here is that I need the pinned element onComplete but onSnapComplete gets fired only in the second ScrollTrigger and onComplete gets fired on the second ScrollTrigger but I don't have access to the pinned element.


I tried to merge the 2 but snapping doesn't snap properly to the top of the next element, just finish the scrolling for some reason.

Link to comment
Share on other sites

I don't know why that demo was set up that way, but you can also snap to 100% of the scrollable element with `snap: 1`. And you're not creating 2 ScrollTriggers, you're creating eight ScrollTriggers one for each `article`

  • Like 2
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.