ScrollTrigger: snap animation without affecting scroll position?

[Steve 0 Likes (Newbie)]

Hi guys,

 

Congratulations on ScrollTrigger.  I'm afraid I haven't used GSAP for several years (since my flash days!), but I'm enjoying getting back into it...

 

This could totally be a 'me' thing, but I expected the `snap` property to affect the animation only, without affecting the scroll position of the page (the demos cleared this up, but it's not entirely obvious from the documentation).

 

My use-case is simple, and possibly quite common...

 

• I am only animating a small element which scrolls normally with the page at all times.
• I have a timeline with an 'in' and an 'out' animation, to show and hide the object while the page scrolls.
• I want the animation to snap to [0, 0.5, 1] – so the beginning, middle and end of the timeline, depending on the scroll position.

 

However, snapping scrolls the page – which I absolutely do not want.  This would make sense if I had set `scrub:true` (or any other value), but I think the only way for me to achieve 'in' and 'out' animations like this, is to split them into two separate scroll triggers – and then I'm worried they could interfere with each other.

 

Does that make sense?  I guess my non-breaking change request would be to add a property to the snap parameters to achieve this?

 

Of course, I may have totally missed something...

 

Cheers,

Steve

See the Pen eYZGEbP by stevenhallltd (@stevenhallltd) on CodePen

Edited September 2, 2020 by Steve
Added codepen demo

[ZachSaucier 7,132 Likes (Superhero)]

Hey Steve, we're glad you're back to using GSAP!

 

Could you please create a minimal demo of the issue that you're talking about? It'd really help us see what you mean and what's going wrong.

 

[Steve 0 Likes (Newbie)]

Hi Zach,

 

I've created a demo (attached to my original post) which kind of gets the point across (I hope). I guess what I really want to achieve is to combine the benefits of `scrub` with snapping to a minimum/maximum duration per chunk of the animation.

 

I think I will have to create multiple ScrollTriggers (only 2 required in this case), but that would be savage if you wanted to snap to say 10 different points in an animation, without manipulating the scroll position.

 

Does that make sense?

 

Cheers,

Steve

[ZachSaucier 7,132 Likes (Superhero)]

Thanks, that's helpful.

 

I think this is a good use case for using the callbacks that ScrollTrigger provides. Most of the time just using onEnter, onLeave, onEnterBack, and onLeaveBack is sufficient. For example:

See the Pen OJNxOVa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But say you wanted to do one at the 50% mark - then you could use the onUpdate callback along with the .progress value provided to fire your animation. But you'd have to add the logic for that yourself in the onUpdate.

 

Side notes:

• We recommend using xPercent and yPercent when doing percentage transforms.
• In the demo I made above, I'd usually use a loop to do the above to keep the code more DRY. But I didn't know if you were going to reuse the same effect for each section or have a different animation each time so I didn't do it in the demo. To learn more about using loops, see my article on animating efficiently.