Animate only one element while having more with same class

[PimS]

Hi Guys,

 

I got this question that is probably fairly easy to solve, but is really bugging me.

 

I'm using TweenMax and I've got multiple instances with the class "tree". When I click on one of them I ONLY want to animate THAT element. Is this possible, or do I have to give them all a unique name/id/class?

 

I know it's possible with $(this) in jQuery, but i'm not sure how to implement this in GSAP TweenMax.

 

 

Here's my code (it's a sprite animation):

 

--

 

var Tree1 = $(".tree-1 img");

var animationTree1 = TweenMax.to(Tree1, 0.5, {left: "-1560px", ease: SteppedEase.config(10), paused: true, onComplete: reset});

 

$(Tree1).click(function(){

animationTree1.play(0);

});

 

function reset(){

animationTree1.time(0).paused(true);

};

 

--

 

I hope you can help me !!

 

Pim

[PimS]

Ah I think I already solved it myself.

 

Solution in case there are more noobs like me with this question:

 

---

 

$(Tree2).on('click', function(e){

var animationTree2 = TweenMax.to($(this), 0.6, {left: "-3262px", ease: SteppedEase.config(14), paused: false, onComplete: resetTree2});

 

function resetTree2(){

animationTree2.time(0).paused(true);

};

 

});

 

---

[PimS]

Hmm now it conflicts if I click the object again before it finishes...

 

Any way to say: on click finish animation then play?

[Diaco]

Hi PimS 

 

pls check this out : 

See the Pen pjbqvE by MAW (@MAW) on CodePen

 

btw , for sprite animation , check this out too : 

See the Pen MYdwRP by MAW (@MAW) on CodePen

[PimS]

Wow great! Thanks

 

Edit: Yeah I already found the second link But thank you anyway !!