ScrollTrigger item decomposition with snapping

[Toxer0101]

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?

[mvaneijgen]

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:

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

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)
      }

[Toxer0101]

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?)

[GSAP Helper]

I think it might really help if you tried to isolate the problem much more, maybe with just some colored <div> elements and the GSAP code (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. This greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Quote

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?

That's super kind of you! We sure appreciate that, but please don't feel any obligation to donate. Pretty much all of our support comes from Club GreenSock memberships which get you some handy members-only plugins. No pressure - join whenever you see the value of doing so. In the meantime, enjoy the tools!