Altea Posted February 8, 2022 Share Posted February 8, 2022 Hello, I'm writing an animation for a Map. As you can see when a button on the left is clicked I draw the line and a circle (sometimes more the one) that indicate a point on the map. The animation is working fine but I have a problema when I start the animation one right after the others. I wrote this lines tlMap.set(mapCircles, { autoAlpha: 0 }); tlMap.set(mapLines, { drawSVG: "0 0" }); So I can reset the lines and circles of all the points when I click on a button. But if you click on a button and right away click on a second button you wil see that the first animation will still be going and I would end up with lines from more then one button showing on the map. I think i need a reverse on all the other animations but I cannot figure out how to do it. I started to move away from jQuery to Vanilla JS, if you find something that is done wrongly I'll appreciate if you point it out for me. See the Pen zYPNXry by skie78 (@skie78) on CodePen Link to comment Share on other sites More sharing options...
Solution mikel Posted February 8, 2022 Solution Share Posted February 8, 2022 Hey @Altea, This case might help you: See the Pen KKmdMdX?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
Altea Posted February 9, 2022 Author Share Posted February 9, 2022 Thank you Mikel for the answer, just to make sure if I understand it correctly the difference in you example is that the the animation block is declared outsite the forEach so inside the gsap I can call all the animation to "reset" themself. I could probably apply the same approch and use the timeline controls like reverse correct? Link to comment Share on other sites More sharing options...
OSUblake Posted February 9, 2022 Share Posted February 9, 2022 There is no animation outside of the block. He's just setting the initial opacity. Look a little bit deeper at what's going on. When you click the button, it is setting all the blocks (ani) back to their initial position. .to(ani, {x:0, opacity:0.1, duration:1}) Immediately after that, he is animating the actual target (ani[i]). It's happening at the same time as the previous .to(), so even though all the ani blocks are in the first .to(), the second .to() will cancel it out. .to(ani[i], {duration: 3, x: 200, opacity: 1},0); You can also store animations on an element. myElement.animation = gsap.timeline()... // then you can control wherever you want myElement.animation.reverse(); 3 Link to comment Share on other sites More sharing options...
Altea Posted February 9, 2022 Author Share Posted February 9, 2022 Thanks for the explanation. 1 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