Jump to content
GreenSock

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

(beginner) onClick button plays just once.

Recommended Posts

I am newbie to GSAP and wonder why my menu animates just ones. I would be grateful if you helped to fix the code. Thanks a lot.

See the Pen EqVOpx by jordanboza (@jordanboza) on CodePen

Link to post
Share on other sites

Hi @Jiri

 

It's because your code is using the conditional `menuAnimation.reversed() ? menuAnimation.play() : menuAnimationBack.reverse()` Which plays fine the first time, because `menuAnimation.reversed()` is true, and when that animation is run it sets to false, which, then, isn't reset back to true by your `menuAnimationBack.reverse()`.

 

 

  • Like 3
Link to post
Share on other sites

Hi @Jiri :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

Using a different animation for reverse can sometimes be a bit tricky. Here are a couple threads that may be helpful.

 

 

That being said, I think a simple toggle would work well in your case. Here's a fork of your pen.

See the Pen wVKRbw by PointC (@PointC) on CodePen

 

Another option is to use one timeline with a pause in the middle. Here are a couple demos I made for different thread answer but they show the general idea.

 

See the Pen oPELMe by PointC (@PointC) on CodePen

 

See the Pen GXQWJw by PointC (@PointC) on CodePen

 

Hopefully that info helps. Happy tweening and welcome aboard.

:)

 

  • Like 4
Link to post
Share on other sites

Guys, thanks. ? Going to read and learn. 

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

×