Jump to content


Animate only one element while having more with same class

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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});
function reset(){
I hope you can help me :) !!
Link to comment
Share on other sites

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(){
Link to comment
Share on other sites

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


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

Link to comment
Share on other sites

Wow great! Thanks :D


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

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.