Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Can you pause and resume a ScrollTrigger animation?

Recommended Posts

I am creating several timelines controlled using ScrollTrigger, and that's all working great so far!


What I'd like is to temporarily pause and then later resume the scroll listener. Essentially, pause and be able to scroll the page without my timeline playing, whilst leaving everything in the state it was at the moment I paused it. Then resume, and have everything immediately start responding to the page's scroll position again.


Is this possible?


I can see that there is a "disable" method, but this appears to unpin and reset everything as if the page hadn't been scrolled at all, which is not what I want.


I know that I can completely destroy and then re-create the timeline, but this results in a short visual flicker whilst everything is destroyed and re-generated again.


Thanks for your help!

Link to post
Share on other sites

Actually, my bad - "disable" doesn't reset everything, I misunderstood the documentation.


For reference, I am giving all my ScrollTriggers an ID, and then using


to pause the ScrollTriggers, and


to resume again.


Problem solved!


Update: problem not solved - see new comment in the thread

  • Like 2
Link to post
Share on other sites

I am revisiting this post as I have realised that I in fact did not solve this issue after all.


Anything with scrub: true is reset to the start, as if I had never scrolled at all.


Is it possible to disable a scrubbing ScrollTrigger and leave everything in the exact state it is at the time I disable it, even if mid-tween?

Link to post
Share on other sites

Sure, you can tell it not to revert by passing false as the parameter, like trigger.disable(false);

  • Like 2
Link to post
Share on other sites
7 minutes ago, alexb148 said:

I can't currently see that mentioned in the docs though

Thanks for pointing that out. I've updated the docs to include it. You might need to hard refresh to see the update.

  • Like 2
Link to post
Share on other sites
4 hours ago, oligsap said:

Could we do the same with the kill function ? like trigger.kill(false); ?

That's quite a testable hypothesis :) 


Yes, you can do the same with the kill function. I updated the docs for that as well.

  • Like 3
Link to post
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.