Jump to content
Search Community

Resetting greensock animation from each() function

Vincentccw test
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

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

... 

 

 

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?

Link to comment
Share on other sites

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:

j11s.jpg

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.

  • Like 2
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.
×
×
  • Create New...