Jump to content
GreenSock

Bertyhell

Pause animation on reverse complete

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

I'm trying to get an animation to pause at the end when i play it and at the start when i play it in reverse.

The codepen works sometimes but most of the time, the element becomes visible after the play reverse has completed.

 

The expected behavior is:

  • page loads: button is visible, red div is not
  • user clicks on button: red div fades in while animating to the right
  • The red div stays visible on the right
  • user clicks on button again: red div fades out while moving to the left
  • the red div stays hidden on the left

 

The current behavior is:

  • page loads: button is visible, red div is not
  • user clicks on button: red div fades in while animating to the right
  • The red div stays visible on the right
  • user clicks on button again: red div fades out while moving to the left
  • the red div pops back up on the right

 

Note: I would prefer to not set the opacity 0 and x: -100 through css because of reasons.

 

Here is a video of the behavior working and not working:

 

See the Pen YjgYQG by bertyhell (@bertyhell) on CodePen

Link to comment
Share on other sites

You can reduce your code to few lines. While defining the timeline, set it's paused property to true so you don't need to use pause method. Also set it's reversed property to true.

 

Now inside click function use the ternary operator, on first execution it will check if timeline is reversed, if it is reversed then it will play the animation. If it's not reversed then animation will reverse. That's where setting reversed property comes into play for first execution.

 

Also I am using from tween, so you don't have to use 0 duration tween to hide your div. In cases where you want to do that, you can use set method instead. Plus in case your animation is just single line then you can instead use a tween instead of timeline.

 

See the Pen BPbYqg?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • 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.
×