Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

onclick reverse master timeline (specific function)

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 all,


I have a master timeline as follows, where Ive added various functions which all contain TimelineLite's:


var master = new TimelineMax({paused: true})
   .add(logoRollOver, '+=2.8');


I want to reverse the banner animation when a particular button is clicked:


$('#learnmore').click(function() {
  //Reverse the banner animation?
  //bannerAnimation.reverse(); doesnt work


Is there a easy way to do this? At the moment I cant target the timeline in the bannerAnimation function.


Many thanks in advance :).

Link to comment
Share on other sites

Hi @ainsley_clark,


After master played, you can use this method (see docs):


myAnimation.reversed( true ); //sets the orientation to reversed
myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation


Click the green square:


See the Pen GXbvdO by mikeK (@mikeK) on CodePen


Best regards



  • Like 2
Link to comment
Share on other sites

Mikel provided a solid answer, but I think you may have been describing something else. 

Unfortunately, without seeing the full code or a demo we have to take a few guesses here. 


You mentioned your functions contain timelines. Is drawLogo a function or a timeline? 


Assuming its a function you will need to make sure:


  1. that drawLogo() logo returns a timeline
  2. that when you build your master timeline you are adding the timeline that drawLogo() returns, not the drawlogo function.


I'm guessing you want something like

function green() {
  var tl = new TimelineLite();
  tl.to(".green", 0.3, {y:50})
  return tl;

function orange() {
  var tl = new TimelineLite();
  tl.to(".orange", 0.3, {y:50})
  return tl;

var master = new TimelineMax({repeat:2});
master.add(green());//add the timeline that green() returns
master.add(orange());//add the timeline that orange() returns


with that setup you can control master however you like master.restart(), master.reverse() etc.


See the Pen rZEYvr?editors=0010 by GreenSock (@GreenSock) on CodePen


Please read and watch the videos at: https://css-tricks.com/writing-smarter-animation-code/ particularly the part Use functions to create and return timelines. I think you'll find it super helpful.


Please consider providing a demo next time. It makes things easier for all. 


Happy Tweening!



  • Like 3
Link to comment
Share on other sites

Hi @Carl and @mikel


Thank you for your swift and detailed replies.


I have added my new timelinelites to the master timeline as functions, as in, I have returned the the tls from the function and added to master like so:


var master = new TimelineMax({paused: true})
master.add(bannerAnimation(), '-=2.8');
master.add(logoRollOver(), '+=1');



When doing so I encounter problems though (sorry If I have repeated myself on the forum with the same bit of code):


1) I have a mouseenter function and a mouseleave function in logoRollOver() like so:


///////////////////// Header RollOver Animation ///////////////////// 
function logoRollOver() {

  var tl = new TimelineLite({})
  .to("#logo", 0.8, {rotation: -90, transformOrigin:"50% 50%", strokeOpacity: 1, ease:Power2.easeOut, yoyoEase:Power2.easeOut})
  .to('.blue_stroke, .orange_stroke, .shadow', 0.6, {fillOpacity: 0}, "-=0.8")
  .to(".letters:nth-child(n+3)", 0.5, {x: 300}, "-=0.8")
  .to("#I", 0.5, {rotation: -335, x: 70, y: -65, scaleX: 2.6, scaleY: 4.6, transformOrigin:"50% 50%", fillOpacity: 0, strokeOpacity: 0.7}, "-=0.8")
  .to(clone, 0.5, {x: 400, rotation: 90, transformOrigin:"50% 50%", strokeOpacity: 1, fillOpacity: 1}, "-=0.8")

  return tl;   

//Mouse Enter Play TimeLine
$('#home_header').mouseenter(function() {  
//Mouse Out Reverse TimeLine
$('#home_header').mouseleave(function() {


By returning the timeline from the logoRollOver function, and moving the mouseenter and mouseleave functions out; the function the animation plays, but it doesn't reverse. 


2) I also have a learn more button, I would like to reverse the bannerAnimation function when clicked. Again, the reverse doesn't work, it just suddenly hides the text, which I can only presume is the same behaviour.


$('#learnmore').click(function() {


@Carl I have forked your pen here to explain what I mean:


See the Pen mGNvNQ?editors=1111 by ainsleyclark (@ainsleyclark) on CodePen


Thanks again for your help.



Link to comment
Share on other sites

I've read this through a few times and I'm confused as to the desired behavior. It seems like you have a logo timeline with mouseenter/leave to play/reverse? You also have a banner timeline which should operate independently of the master with a button click? 


From what I'm reading/understanding, I'm not sure a master timeline is the right choice here since it sounds like each part needs to do its own thing. It may be that I'm missing something though. Can you explain really simply what you want the orange box to do and what you want the green box to do? 


The way you have those mouseenter/leave events written right now is calling the logoRollover() function and recreating the timeline each time. That's not ideal. You'll usually want to create a timeline once and then play/reverse it on click/hover.




  • Like 2
Link to comment
Share on other sites

As PointC said - it's a waste of resources (read browser's memory) to create new timeline every time you call a function.


Just create your timelines *calling* the function once and then control each timeline calling its functions, not calling a timeline creation function again. Modified CodePen:

See the Pen ZqYeRv by mattsrinc (@mattsrinc) on CodePen


Do note that you can change the z-order of objects in DOM very easy but SVG (if you will use it) doesn't have third dimension and an object that resides in a file the last will get drawn above all other. Usually this is solved by recreating the object again (removing and adding it), some javascript libraries have "put on top" commands for that.

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