Resetting greensock animation from each() function

[Vincentccw 3 Likes (Newbie)]

I got the code snippet from rhernando last time, I've modified the code to make it respond to click instead of hover, now my problem is since each animation is created separately using Jquery each and greensock animation, how should I control all of them at once instead of controlling one only using "this.animation.play()/reverse();"

 

See the Pen BrALe by vincentccw (@vincentccw) on CodePen

 

 The reason is because if you look into my pen, I want all the buttons to reset to its original state before I click on a new one (that means only one button will be activated at the time.)

[Rodrigo 3,823 Likes (Superhero)]

Hi Vincent,

 

Thanks for providing the codepen, it was very useful.

 

I think the following code should do the trick:

$("li").each(function(index, element){
  var tl = new TimelineLite({paused:true});
  tl.to(element, 0.2, {width:120, padding:20})
    .to(element, 0.2, {backgroundColor:"#004", color:"orange"}, "-=0.1")
  element.animation = tl;
})


$("li").click(function()
{
  if($('li.active')[0])
  {
    $('li.active')[0].animation.reverse();
    $('li.active').removeClass("active");
  }
  $(this).addClass("active");
  this.animation.play();
});

I forked your codepen. you can see it here:

See the Pen BczGj by rhernando (@rhernando) on CodePen

 

Let us know if this is what you're after.

 

Rodrigo.

[Vincentccw 3 Likes (Newbie)]

... 

 

 

Thanks again rhernando, the code works perfectly. I know this is a bit off topic since i'm asking more juery oriented question here, but can you explain the extra code in ur pen:

 if($('li.active')[0] && $("li.active")[0] != this)
  {
    $('li.active')[0].animation.reverse();
    $('li.active').removeClass("active");
  }

the animation.reverse will only work with $('li.active')[0].animation.reverse(); or this.animation.reverse(); but not something like $('li.active').animation.reverse(); or $('li').animation.reverse(); .....it gives me error and says animation/ reverse are udefined.Why can't I just apply the animation to other selector?

[Rodrigo 3,823 Likes (Superhero)]

The reason is because of the difference between a JQuery object and a DOM element.

 

A JQuery object is a collection of stuff that includes the DOM element(s) selected. The DOM element is also an object but it refers directly to the element and it's properties, there lies the difference between this and $(this), this referse to the DOM object while $(this) refers to the JQuery object, use a simple console.log in dev tools and you'll see the difference.

 

The animation is added to the DOM element object as a property (in fact you can add anything to any DOM element, just be careful with the names you give to the properties), then you can access to that particular property you do it through the following code:

element.property.propertyMethod();

//in the sample is
this.animation.play();

//which means for this element (the DOM element being clicked)
//find the property animation, that is a timeline or tween
//and apply the method play()

Since a JQuery object contains the DOM element among other stuff, you just have to look for it and if you check the object with devl tools you'll see something like this:

The first element is the DOM element and the second one is the JQuery object. As you can see the first element of the JQuery object is the DOM element, which has an index 0, therefore when you use this code:

$("li.active")[0]

You're referring to the DOM element in the JQuery object, and that's why one code works and the other doesn't.

 

That particular code looks for a DOM element with the class "active" and if the element being clicked is different from that element, then reverses the timeline accessing the DOM element and finally removes the "active" class through the JQuery object, since the DOM element doesn't have a remove() method.

 

My suggestion would be to play with this and $(this) stuff and console log. You'll get the hang of it in no time.

 

Rodrigo.

[jamiejefferson 1,193 Likes (Superhero)]

Also, if you prefer to use a jQuery method, you can access the property of a DOM element using collection.prop('someprop'), which does the same thing as collection[0].someprop

$('li.active')[0].animation.reverse();

// or

$('li.active').prop('animation').reverse();

[Vincentccw 3 Likes (Newbie)]

...

Thank you for such detail explanation, i really helps me a lot 

[Vincentccw 3 Likes (Newbie)]

...

Thanks will try that out too~~