Jump to content
Search Community

Can't Figure Out How To Reverse Timeline

five.design 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

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.

 

Patrick

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

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,

Patrick

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

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