Jump to content
Search Community

Can you pause and resume a ScrollTrigger animation?

alexb148 test
Moderator Tag

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!

  • Like 1
Link to comment
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

ScrollTrigger.getById(i).disable();

to pause the ScrollTriggers, and

ScrollTrigger.getById(i).enable();

to resume again.

 

Problem solved!

 

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

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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 comment
Share on other sites

  • 1 year later...

This is a great feature!
Just a note, the .enable() documentation should have the same information as .disable() for the 'revert' parameter.
The ScrollTrigger animation will jump from 0 to the current position on .enable() if you don't set 'revert' to false.

  • Thanks 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.
×
×
  • Create New...