Jump to content
Search Community

Clear animation timeline?

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

Hi Vincent,

 

The best way is by adding the timeline to the DOM element, the guys created a superb example:

 

See the Pen af138af51e5decd43c3c57e8d60d39a7 by GreenSock (@GreenSock) on CodePen

 

The issue with your sample is that every time you hover an item you add another tween to your timeline, perhaps that's good for a memorizing game but not a regular app ;)

 

As you can see is incredibly simple and in your case all you have to do is change the $("li") selector for $("div.class") and you'll be on your way.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Vincent,

 

The best way is by adding the timeline to the DOM element, the guys created a superb example:

 

See the Pen af138af51e5decd43c3c57e8d60d39a7 by GreenSock (@GreenSock) on CodePen

 

The issue with your sample is that every time you hover an item you add another tween to your timeline, perhaps that's good for a memorizing game but not a regular app ;)

 

As you can see is incredibly simple and in your case all you have to do is change the $("li") selector for $("div.class") and you'll be on your way.

 

Rodrigo.

Hi Rhernando,

 

Thanks for the solution, but is it possible to implement this solution into my code instead of using the snippet? 

 

For some reasons I have to used .on with mouseenter and mouseleave function.

 

Thanks for the head up by the way  :D

Link to comment
Share on other sites

It should be the same way, loop through the div elements, create and assign the timeline to each and then using the on method play and reverse the timeline for each event(over or out):

$("div").each(function(index, element)
{
  var tl = new TimelineLite({paused:true});
  
  tl.to(element, .2, {opacity:0,ease:Quad.easeIn});

  element.animation = tl;
});

$("div").on('mouseenter', function()
{
  this.animation.play();
}).on('mouseleave', function()
{
  this.animation.reverse();
});

The beauty of this method is that when you loop through the elements you add a new property to the DOM element, in this case that property is the animation and after that you can call it like any other property of any element.

 

Also keep in mind that when you use a JQuery selector and bind an event to it(mouseenter and mouseleave in this case) this refers to the DOM object itself while $(this) refers to the JQuery object.

 

Rodrigo.

Link to comment
Share on other sites

It should be the same way, loop through the div elements, create and assign the timeline to each and then using the on method play and reverse the timeline for each event(over or out):

$("div").each(function(index, element)
{
  var tl = new TimelineLite({paused:true});
  
  tl.to(element, .2, {opacity:0,ease:Quad.easeIn});

  element.animation = tl;
});

$("div").on('mouseenter', function()
{
  this.animation.play();
}).on('mouseleave', function()
{
  this.animation.reverse();
});

The beauty of this method is that when you loop through the elements you add a new property to the DOM element, in this case that property is the animation and after that you can call it like any other property of any element.

 

Also keep in mind that when you use a JQuery selector and bind an event to it(mouseenter and mouseleave in this case) this refers to the DOM object itself while $(this) refers to the JQuery object.

 

Rodrigo.

Thanks for the solutions, but now I've come across another problem, what if the element I'm targeting is the child of the div?

ie I want to animate the paragraph element when I mouseenter/mouseout the div?

 

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

 

Thanks for the help again, really appreciate it.

Link to comment
Share on other sites

Thanks now it works perfectly, but sorry to bother you again, I still have some doubts though hope you can help me with this.

 

from the snippets, why at the end of "each" function,  why did he use this?

 

element.animation = tl;

 

what does it mean actually? Since it is already in the tl variable why cant he reuse the tl variable instead create a variable call animation?

 

 

and also when hover, why is "this" need to be introduce before animation?

 

this.animation.play();

this.animation.reverse();

Link to comment
Share on other sites

Very simple just use JQuery's children() method to select the <p> tags in the divs:

tl.to($(element).children('p'), .2, {opacity:0,ease:Quad.easeIn});

That should do it.

 

Rodrigo.

Thanks now it works perfectly, but sorry to bother you again, I still have some doubts though hope you can help me with this.

 

from the snippets, why at the end of "each" function,  why did he use this?

 

element.animation = tl;

 

what does it mean actually? Since it is already in the tl variable why cant he reuse the tl variable instead create a variable call animation?

 

 

and also when hover, why is "this" need to be introduce before animation?

 

this.animation.play();

this.animation.reverse();

 

 

Thanks again

Link to comment
Share on other sites

All those things are javascript magic tricks, of course there's nothing magical or tricky about them just a great example of how to use javascript.

 

Long story short... in JS everything is an object and you can add as many properties you want to any object you want. In this case in the loop element refers to the DOM object, ie, the red DIV element you can see in the screen, in the case of your code. Under the hood it has a bunch of properties(CSS, events, browser-spcific stuff, etc).

element.animation = tl;

What this line means is:

To the element (div in this case) add a new property called "animation" and assign to this property the object contained in the variable "tl", which is a timeline, which is also an object and has it's own properties and methods as well (you can see how deep the rabbit's hole goes, right?).

 

Then you call the the event and the event handlers, mouseenter and mouseleave respectively. In those handlers this refers to the DOM element, which is the same DIV element you selected in every pass of the each loop.

this.animation.play();

this.animation.reverse();

What those lines means is:

 

When mouseenter happens, search the element's property called animation and execute (I don't know if execute is the right word) on it the method called play(). The same thing goes to mouseleave and reverse(). Since the animation property is a timeline and you can call those methods on it (play and reverse) the timeline plays and reverse when those events happens.

 

Like this you can add several other tweens/timelines to any DOM element and apply any of the engine's methods to them on different situations.

 

I'd recommend you to take a look at this links:

 

Javascript tutorials

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

http://www.w3schools.com/js/default.asp

 

JQuery

http://www.w3schools.com/jquery/default.asp

http://learn.jquery.com/

 

And always make a search in google and http://stackoverflow.com/ you'll find far better answers from people that have quite more knowledge than I do. You'll be surprised with the fact that everyday you'll learn new stuff.

 

Best,

Rodrigo.

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