Image sequence loop

[Shanda]

Hello, I made this scrolling animation  but would like to recreate the animation on a continuous loop when the image enters the view port.  Is there documentation or an example that will help me understand how to do this?

See the Pen NWvmyXq by okcwebdev (@okcwebdev) on CodePen

[OSUblake]

Hi Shanda,

 

I'm not sure I understand exactly what you are trying to do. You say continuous loop, but right now you have scrolling hooked up to the animation, and scrolling can't be continuous. Or are you just trying to make the animation play on a loop?

 

[Shanda]

Hello, Yes I want the animation to loop. I do not want it tied to scrolling because that is a little annoying on mobile.

[OSUblake]

You can create a standalone ScrollTrigger, using whatever element you want for your trigger, and then use a callback like onEnter or onToggle to start playing the animation. 

 

So something like this. Just adjust the animation how you like.  

 

let animation = gsap.to(clubbys, {
  frame: frameCount - 1,
  snap: "frame",
  paused: true,
  repeat: -1,
  yoyo: true,
  ease: "none",
  duration: 2,
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

ScrollTrigger.create({
  trigger: ".my-trigger",
  onEnter() {
    animation.play()
  }
});