Pause animation on reverse complete

[Bertyhell]

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

[Sahil]

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