Jump to content

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

Can't Figure Out How To Reverse Timeline

Recommended Posts

This is gonna be easy for you, but I've tried for hours and I can't figure it out.


Here's what I've done so far:

  • I've created a TimelineMax timeline and wrapped it in a function
  • The function accepts two arguments – one specifying the clicked part of the page and one for the other half
  • At a click event, the timeline starts to play with the desired animation depending on which side has been clicked


This works great, but I can't figure out how to reverse the whole thing. At the end of the animation, a "back button" appears and I want the timeline to animate backwards to the beginning (i.e. to the same view the visitors initially see) when the user clicks that button..


What code do I have to write on the lines 33 and 37 to achieve this?


Thank you very much in advance for your advice.



See the Pen wVeWVQ by FiveDesign (@FiveDesign) on CodePen

Link to comment
Share on other sites

Hey @five.design,


Welcome to the GreenSock Forum.


There may be other solutions (Note: <button> in html!):


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


Happy tweening ...



  • Like 2
Link to comment
Share on other sites

Thanks Mikel, but I don't really understand.


What do you mean by "(Note: <button> in html!)"?


Also, I don't want the two sides to switch when either back button is clicked, but rather go back to the initial state.


Could you please explain your code changes?


Thank you,


Link to comment
Share on other sites

You can just call reverse() on any animation, but in order to do that you've got to have a reference to that animation. So you could create a variable (outside your functions) to store the animation reference. But the bigger problems it that the way you built this means that the back buttons will never trigger anything because you have click event handlers on the parent elements, thus those will hijack the clicks. Feel free to add a console.log() inside your back button handlers and you'll see they never fire. 


You could just handle the logic based on click on the whole section like this: 

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


But I the danger in that approach is that if someone clicks very quickly, you'll be creating timelines based on inbetween positions, thus when those get reversed, they'll appear to only go part-way back (that's not a problem with GSAP - it's a logic issue in the code). 


So you could pre-compile each of the two timelines and then just flip the direction on each click which ensures that the starting/ending states are locked in properly: 

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


You could also build the timelines on the fly so that the easing isn't inverted on reverse. Lots of options. 


Anyway, I hope that helps. 

  • Like 5
Link to comment
Share on other sites

Hey @five.design,


<button>: I moved the button in the html to activate it.


Here is another suggestion: one of my first steps with GSAP - @OSUblake and the Forum team helped me a lot.


See the Pen ZbPxjN by osublake (@osublake) on CodePen


Maybe it will help you - especially the matchMedia effect.


Happy tweening ...


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