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.
Cheers,
Ben