Shanda Posted November 22, 2021 Share Posted November 22, 2021 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 More sharing options...
OSUblake Posted November 22, 2021 Share Posted November 22, 2021 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 More sharing options...
Shanda Posted November 22, 2021 Author Share Posted November 22, 2021 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 More sharing options...
OSUblake Posted November 22, 2021 Share Posted November 22, 2021 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() } }); 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now