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! https://codepen.io/abbasarezoo/pen/NWYRezZ Thanks again.

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.

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 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. https://codepen.io/abbasarezoo/pen/NWYRezZ/e8eeeb5e9f985e5857151bfde2ad5019 Thanks!

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

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: