Jump to content
GreenSock

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

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.

 

Patrick

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

Share this post


Link to post
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 ...

Mikel

 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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 ...

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×