Jump to content


ScrollTrigger: snap animation without affecting scroll position?

Recommended Posts

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...




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

Edited by Steve
Added codepen demo
Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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?




Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.