Juan Munoz Posted January 8 Posted January 8 Hi, I'm trying to develop an infinite carousel of images with different sizes. I was able to create the carousel but I want to be able to drag to move the carousel and when the drag ends the movement resumes. I've seen several tutorials on this blog but it's been difficult to adjust because they don't have different images. Thanks for any help
mvaneijgen Posted January 9 Posted January 9 I've copied the seamless loop helper with draggable functionally from the docs https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/#demo-with-draggable and just add paused: false to it an it all seems to work as expected. I've also given some of the elements a random width, which also works out of the box. Hope it helps and happy tweening! See the Pen LEPQmeQ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen. 2
Juan Munoz Posted January 11 Author Posted January 11 On 1/9/2025 at 7:32 AM, mvaneijgen said: I've copied the seamless loop helper with draggable functionally from the docs https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/#demo-with-draggable and just add paused: false to it an it all seems to work as expected. I've also given some of the elements a random width, which also works out of the box. Hope it helps and happy tweening! I just tried your code but sometimes when I drag it stops.
Rodrigo Posted January 13 Posted January 13 Yeah that could be related to this part of the helper function: onThrowComplete: () => { syncIndex(); wasPlaying && tl.play(); } In some cases that boolean could be false so it won't play the timeline after a throw because the timeline that the helper function creates is paused. You can just remove that from the callback and see how it works: onThrowComplete: () => { syncIndex(); tl.play(); } Hopefully this helps Happy Tweening!
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