Share Posted April 9 So I have an animation in using a timeline, and I want this animation to be able to be reversed. When I play it normally there's no problem, it's perfect. But when I try to reverse it, it plays one more time each time I play the animation. Here's my code: const changeBox = (reverse = false) => { //not allowing the user to remove the slideshow while the animation is playing allow = false; changeTl.fromTo('.active', { x: 0, opacity: 1, scale: 1, duration: 0.35 }, { x: -500, opacity: 0, scale: 0.75, duration: 0.35 }).fromTo('.active', { x: 500, opacity: 0, scale: 0.75, duration: 0.35 }, { x: 0, opacity: 1, scale: 1, duration: 0.35 }, '>'); changeTl.reverse(0); } I don't know at all what can be wrong since I'm quite new to gsap and still don't know all the details. PS: I tried to recreate it in CodePen, but it does not import the right version of gsap 😕 Thanks in advance for the help Link to comment Share on other sites More sharing options...
Share Posted April 9 Hi, Unfortunately there’s not much we can do without a minimal demo. The only thing I can think of with the snippet you posted is that you could be adding new instances to your timeline on each click event, thus generating the behavior you’re describing. Also is kind of weird what you’re describing about codepen. Maybe you can fork this starter codepen in order to show your issue See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted April 9 Here I created a minimal demo with your starter. Hope it'll help you understand the problem See the Pen bGmNXLW by eli-ott (@eli-ott) on CodePen Sorry just saw that the onComplete wasn't supposed to be here at all 😕 Link to comment Share on other sites More sharing options...
Solution Author Solution Share Posted April 9 I've just managed to make it work by changing a bit my timeline like that: const changeTl = gsap.timeline({ onComplete: () => { changeTl.clear(); }, onReverseComplete: () => { changeTl.clear(); } }); 1 Link to comment Share on other sites More sharing options...
Share Posted April 9 Heya! Nice job finding a solution. I'm not sure what the end goal is here, the code you is a little confusing because it looks like a carousel but it's just shuffling two items around, if that's all you want to do it could be best to create the timeline outside the function and then just control it with methods. Then you're not adding to it and don't have to clear anything - that's best practice really. See the Pen mdzJbNL?editors=0011 by GreenSock (@GreenSock) on CodePen If you're looking for a seamless horizontal loop carousel there's a helper function herehttps://greensock.com/docs/v3/HelperFunctions/#loop Hope this helps! 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 9 Thanks a lot for this pen, it'll help me quite a lot! My end goal here is to create a carousel for pictures. But the difficult is to change the image because I firstly Flip the image in this carousel here from another container, so I have to change the element in itself and not just the source. Hope I was clear enough 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