Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Shanda

Image sequence loop

Recommended Posts

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

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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()
  }
});

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×