scrolltrigger Proper way to snap to each child

[gem]

Hello, the animation is currently working how I want it to, but was wondering if there was a way so that each element on the left would snap to centered. The current way it is working is making it so that it snaps to the start or end of the container. Thanks for the help!

 

Please note - I have just started learning GSAP. If there is a much better way to approach this animation, please let me know. Thanks!!!

See the Pen NWOyJeg by bonfiremitch (@bonfiremitch) on CodePen

Edited May 8, 2023 by gem
Additional info

[Cassie]

Hi there!

 

Welcome to the forums.

So snap:true isn't valid. GSAP doesn't know what you want to snap to, a timeline is just a 0 - 1 progress as far as snap is concerned, it doesn't visually know which points the cards are in view.

Here's some reduced down details from the docs -
 

Quote

snap   : Number | Array | Function | Object | "labels" | "labelsDirectional" -

Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.).

snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values.

e.g.

 

Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1).

Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false).

"labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course)

So the easiest option would be to use 1/4 or 0.25 to snap to every quarter of the timeline, but your timings are a little off so that doesn't work.

If you log out the progress value you can grab the exact points and feed them into an array, like so...

See the Pen BaqYEpw?editors=1010 by GreenSock (@GreenSock) on CodePen

or you could add labels at specific points and snap to them, this is my favourite way, nice and clear what's happening.

See the Pen zYmRXzg?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Hope this helps!

[gem]

Hi Cassie,

 

This is amazing.

 

Thank you so much!!!