[ScrollTrigger item decomposition with snapping]

5 minutes ago, mvaneijgen said:

Hi @Toxer0101 welcome to the forum!

 

Are you sure you want ScrollTrigger? If I read your question right, you just want to play an animation on each scroll, something like this:

 

 

 

 

That is what the Observer plugin is perfect for!

https://greensock.com/docs/v3/Plugins/Observer

 

If you still want to use ScrollTrigger, I would add labels to points you want to snap to in your timeline and then snap to those labels

      snap: {
        snapTo: "labels", // snap to the closest label in the timeline
        duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
        delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
        ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
      }

Think, the Observer will not help here as I want to be in the same section. Only children will be animated. Tried to use labels, did not get success. But will try again, think it's the only obvious and easy-to-use option. Also I want to donate to gsap somehow. I use it non-commercial, don't get any money from using it and will not use it yearly. So I don't want to buy a subscription. Are there any ways to donate?)

[ScrollTrigger item decomposition with snapping]

Hey, gsap team, I love your tool! I'm implementing the item decomposition using ScrollTrigger and want to add snapping so that users should not scroll to the section by themselves and they will be scrolled to the section on any amount of scroll (hope it's understandable). I have an example of how it works right now on codesandbox. Right now all the transitions are hardcoded and I have no idea how to add snapping here. Could you please help?