Jump to content

Ben Stanley

Using the same Timeline for multiple buttons

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 have this Timeline set up,

var tl = new TimelineLite();
tl.to($('.button'), 0.25, {backgroundPosition: 'left top', ease: Expo.easeOut}, "background")
.to($('.button-inner'), 0.25, {backgroundPosition: 'left top', ease: Expo.easeOut}, "background")
.to($('.button-text'), 0.5, {marginTop: 70, opacity: 1, ease: Back.easeOut}, "text-=0.125")
.to($('.button-readmore'), 0.25, {scale: 1, opacity: 1, ease: Back.easeOut}, "text");

And I want to use this same Timeline animation for multiple 'button' classes. I want it to play on hover, then reverse on hover off.


Am I able to call the timeline and just give the object to use?


I tried putting it in a function, and then calling it with the object as a parameter, but I'm having trouble since that method doesn't work for reversing the animation on hover-off.


I am thinking I will have to create an instance of this Timeline animation when I hover on, then remove it once it's finished reversing, but I'm not too sure of how to approach it.





Link to comment
Share on other sites

Hi Ben and welcome to the Greensock forums.


Hover and out effect has been mentioned before in the forums and a great solution was crafted, please check the following codepen of the Greensock collection:


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


As you can see for this type of behaviour the best thing is to create the timeline paused and manage the playback with the hover and out events.


Also feel free to fork and play with it in order to accommodate your particular scenario and if more questions come up keep them coming.




  • Like 3
Link to comment
Share on other sites

Ah, thanks very much.

element.animation = tl;

I didn't know you could set an animation to an element like this. Perfect. Exactly what I needed.





Link to comment
Share on other sites

Well that's basically a property of Javascript, you can add a property to any object. With that particular line you're adding the animation property to that particular DOM element and turns that the particular property is also an object a timeline that has properties and methods as well, for example play() and reverse().


Keep in mind that you can add any custom property/object you want or need to an object, just be careful to not step into a reserved one, using developer tools or firebug can be very helpful to understand and play with this type of features.

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.