Jump to content
Search Community

(beginner) onClick button plays just once.

Jiri 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

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