Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
InTheOne

jQuery.each() loop with clicking the "each" element to play it's timeline but reverse with internal button

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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).

  • Like 4
Link to comment
Share on other sites

@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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×