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

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.

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

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.

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

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!

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

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

[Triggering different timelines at different breakpoints with matchmedia()]

That seems to do the trick. Thanks for looking into this for me, I appreciate it.

[Triggering different timelines at different breakpoints with matchmedia()]

I'm trying to trigger different timelines at different breakpoints using the window.matchmedia(); method.

 

I've attempted to put together a potential example here:

 

const box = document.querySelector(".box");
const change = document.querySelector(".change");

const mqs = [
  window.matchMedia("(min-width: 600px)"),
  window.matchMedia("(min-width: 768px)"),
  window.matchMedia("(min-width: 1024px)")
];

const tl = gsap.timeline({
  paused: true;
});

if (mqs[0].matches) {
  tl.to(box, { backgroundColor: "green" });
} else if (mqs[1].matches) {
  tl.to(box, { backgroundColor: "pink" });
} else {
  tl.to(box, { backgroundColor: "black" });
}

function playTl() {
  tl.play();
}

change.addEventListener("click", playTl);

My idea is to have the change button trigger the animations.

 

Is it a little more complex that this approach?

 

Having dug around in the forums it seems media queries plus gsap tends to throw up a number of complex solutions, I was hoping for something a little more simpler.

 

Here's a Codepen also: 

See the Pen 94c0b1c73f770d36f1103f615ac3e917 by abbasarezoo (@abbasarezoo) on CodePen