Scrolling Image Sequence with GSAP

[Seb1337 0 Likes (Newbie)]

Hey there,
i'am trying to do something like this Scrolling Image Sequence, but i want to add some pauses in between.
For Content like Text and Images to slide in and while i am scrolling. The Image Sequence should stop for that period of time while the Content Changes.
If every Content was displayed the Image Sequence should move on towards the next Frame where another Pause should happen so on and so forth.

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

[OSUblake 18,477 Likes (Superhero)]

Hi Seb,

 

Sounds like you just need combine all that into a timeline, kind of like...

 

let tl = gsap.timeline({
  onUpdate: render,
  scrollTrigger: {
    scrub: 0.5
  }
})

tl.to(airpods, {
  frame: 100,
  snap: "frame",
  ease: "none"
})

tl.to(".my-content", {
  x: -100
})

tl.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none"
})