InTheOne Posted March 22, 2021 Share Posted March 22, 2021 Hi, I'm using jQuery.each(); to build a timeline for multiple elements and have found good documentation on how to start the animation by clicking on the element that has the animation assigned to it, but I can't figure out how to use a button within the element's container to reverse the animation. I'm sure I'm pretty close I just can't quite figure out the correct syntax to "find" the animation when I'm not clicking on the element with the timeline assigned to it. Here's the example: $(".card").each(function(){ var myHeader = $(this).find("h1"); var myParagraph = $(this).find("p"); var tl = new TimelineLite(); tl.to(myHeader, 0.5, {x:100}) .to(myParagraph, 0.5, {x:100, color:"pink"}) .reversed(true);//this reverses the playhead at a time of 0. when you "un-reverse" on click it will play forward this.animation = tl; }) //un-reverse the animation of the card that is clicked on $(".card").click(function(){ this.animation.play(); }) $(".close_it").click(function(){ $(this).parents(".card").animation.reverse(); }) See the Pen JjEPZqJ by jonroc (@jonroc) on CodePen 1 Link to comment Share on other sites More sharing options...
Carl Posted March 22, 2021 Share Posted March 22, 2021 Hi and thanks for the demo. Nice job. One problem is that clicking on the .close_it button also fires the click on the .card You can test this by putting console.logs() in both click handlers. You'll see they both fire when click to reverse. The way around this is to stop propagation of the event (see pen below) The next problem was parents() returns an array so you need to select the first element from that array to find animation. My jQuery is a bit rusty, but the demo below should work See the Pen YzNKRpO?editors=0010 by snorkltv (@snorkltv) on CodePen Also, I'd suggest upgrading to GSAP 3, my free course in my sig will walk you through all you need to know. Along the way I think you'll see you don't need jQuery so much (or at all). 4 Link to comment Share on other sites More sharing options...
InTheOne Posted March 22, 2021 Author Share Posted March 22, 2021 @Carl, Thank you for your quick response, I really appreciate your help! I actually forked this from an older project b/c it was a good simple reproduction of the issue I was having (hence the older GSAP). I know this may sound strange but I learned jQuery before I learned regular JS and primarily work with WordPress so I'm kind of hooked on jQuery but have started to learn more about vanilla JS lately. Thanks again! 1 Link to comment Share on other sites More sharing options...
PointC Posted March 22, 2021 Share Posted March 22, 2021 A good one to bookmark if you're transitioning from jQuery to vanilla JS. http://youmightnotneedjquery.com/ Happy tweening. 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