Jump to content

GSAP Reverse

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

Share this post

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

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.