Snapping skipping element when visible

[Guest]

Hey guys,

 

I have this codepen from previous topics that I liked the design of, and wanted to implement it. However, there is no snapping between articles.

 

I tried putting snap = [0, 0.1, 0.2, 0.3, ...., 1] but that didn't help at all, I am a total novice with GSAP and any guidance on how to do proper snapping would be appreciated.

See the Pen eYZpoXa by flowgrow (@flowgrow) on CodePen

[mvaneijgen 1,736 Likes (Superhero)]

I didn't get why there where two ScrollTriggers  in your demo, so I removed one and combined the logic to just one. In your timeline I've .add(`label${I}`) which adds a label to a point on the time line and if I'm correct this is the place to which you want to snap. After that it was just a question of adding `snap: "labels"` to the ScrollTrigger object and now it will snap to those labels. There are a lot more settings within snap, but you can check the docs for that

 

See the Pen WNMwoMr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Guest]

Appreciate the help!