Jump to content

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

GSAP Reverse

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

Hello, I'm currently creating an offcanvas menu animation using GSAP. I was using timeline.reverse to play the reversed animation when closing the offcanvas menu, however I decided to change the reverse animation a bit, so I created another timeline and I use it when I would use the reverse animation normally. 

Everything works fine, but after I open & close the menu(run the animation and my reverse animation once) the animation doesn't trigger for the second time. I've created a simplified codepen, with the same issue.

Thanks for the help!

See the Pen NVjgLP?editors=1111 by vountish (@vountish) on CodePen

Link to comment
Share on other sites

Since you're dealing with two timelines here, you need to make some changes. When you play the forward timeline and then play the reverse timeline it works because that's their first play. When you click again to play nothing happens because they've already played. You can fix that by using play(0) or restart()which will play from the beginning of the timeline. 


Another problem two timelines creates is by playing the reverse timeline, you're not changing the reversed status of the forward timeline. My advice would be to use fromTo() tweens on both timelines and just use a forward/reverse toggle variable. This is where having one timeline to simply play/reverse makes things a bit easier. Having separate timelines targeting the same element can also cause a fight for control of the element if you click too quickly. 


I think this thread can help.


Happy tweening.



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