ScrollTrigger not snapping when scrolling

[nicvh 0 Likes (Newbie)]

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

[mvaneijgen 1,527 Likes (Superhero)]

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

[nicvh 0 Likes (Newbie)]

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.

[mvaneijgen 1,527 Likes (Superhero)]

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`