Is it possible to pause a scrollTrigger, then restart it?

[abbasarezoo]

Is it possible to pause or 'stall' a frame-based scrollTrigger animation to reveal other elements? Been looking into similar posts that are all related to this original post on CSS Tricks: https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/

 

Is this possible? Do I need to create multiple scrollTriggers and add these to a master timeline? I've seen other comments and posts suggesting it's best practice to add a single scrollTrigger to one element.

 

 

Thanks!

See the Pen e8eeeb5e9f985e5857151bfde2ad5019 by abbasarezoo (@abbasarezoo) on CodePen

[Cassie]

Hi there!

 

There's no one-size-fits-all approach. It depends entirely on what you're trying to achieve. There's no way to 'stall' a ScrollTrigger though. Most approaches involve multiple Timelines/ScrollTriggers.

 

Have you checked out the docs, the demos in the docs and the explainer video? 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Hope this helps.

 

[abbasarezoo]

Thanks for the quick response...

 

I checked the docs and the examples and having not seen anything that truly achieves what I'm after I assumed it wasn't possible. Particularly with the example I'm using where the scroll animates through an image sequence, like the Apple example.

 

The desired approach would be to scroll through a number of frames, stop, running another tween, then scroll through the remaining frames.

 

I'll keep digging!

[Cassie]

That just sounds like a timeline to me.

You can do anything you like - GSAP is just using JS, so you can write any conditional logic you need!

 

//your code
frameScroll
.to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10})

// pseudo timeline code animating an image element in the middle
frameScroll
.to(airpods, {frame: 50, snap: "frame", ease: "none", duration: 10})
.to('h2', {rotation: 360, duration: 10})
.to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10})

 

[abbasarezoo]

Great! However, I tried adding in a delay to the tweens between and it didn't seem to stop the frames from animating.

 

My ideal scenario:

 

// your pseudo timeline code animating an image element in the middle
frameScroll
.to(airpods, {frame: 50, snap: "frame", ease: "none", duration: 10}) //Somehow pause the frame animation here
.to('h2', {rotation: 360, duration: 10}, "+=10") // Keep this in place for 10 seconds
.to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10}) // Restart the frame animation here - but would need to start from frame 51.

I've done something similar in the past with ScrollMagic and it may be I have to revisit that. But thanks for your help so far.

[Cassie]

If you could make your pen public that would be great - it's much easier to help.

 

I think you just didn't have enough space to scroll. Duration isn't in seconds when it's scrubbed because the user controlls how fast they move through the timeline by the speed they scroll.

You can think of duration more like a ratio of the total animation - this animation is 40 seconds, so the first 10 second animation would last for a quarter of the total scroll distance. 

You can move the end point further in order to make it last longer.
 

let frameScroll = gsap.timeline({
  scrollTrigger: {
    trigger: animationContainer,
    pin: true,
    start: 'top top',
    end: '+=3000px',
    scrub: 5,
    markers: true,
  }, 
  onUpdate: render})


.to(airpods, {frame: 50, snap: "frame", ease: "none", duration: 10})
.to('h2', {color: 'red', duration: 10}, "+=10")
.to(airpods, {frame: 147, snap: "frame", ease: "none", duration: 10})

 

[abbasarezoo]

I see - thank you for that I hadn't considered the end position. Will take a look and see if I can figure it out.

 

Also - apologies for not making the Codepen link public. Private by default!

See the Pen NWYRezZ by abbasarezoo (@abbasarezoo) on CodePen

 

Thanks again.

[Cassie]

No worries! I do private pens accidentally all the time.

Glad it's coming together for you.