Unexpected animation

[iDVB]

We have an animation that is only working as expected the first time. 

I'll try to describe and then provide a video and code sample. https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js

 

We have a button that pops up a React Portal modal with a bunch of content (image, copy, close btn). 

For this reproduction we'll focus on the CloseButton only.

 

1. The Portal and content are not yet in the DOM.
2. The component that can activate the Portal has already initialized an empty timeline and ref'd it.
3. User clicks button to open Portal.
4. Portal gets placed into the DOM in the body and as well as the content.
5. This action in React fires the useLayoutEffect that for the first time applies all the animations to timeline and plays it animating in the CloseButton with a fade and slide in.
6. When you click that CloseButton the animation is reversed and onReverseComplete this.paused(0).clear(); is called to clear out all animations and then the Portal and content are removed from the DOM. 
7. The reason this is done is that the animation in of the modal needs to be calculated each time the portal is opened as the animation is a circle that aligns to the button being clicked.
8. Now up to this point everything works as expected.
9. However, now when you click to open the Portal again... all elements of the animations just immediately appear and then they fade/slide in after, causing a blink effect.

 

The #1 most unexpected part is that the timeline is being cleared AND the DOM elements being animated are being completely removed from the DOM (See div in video) however you can see in the console that just before the second initialization the CloseButton "starts" as opacity: 1 as inline style. This appears like even though the element was removed from the DOM and the timeline.... somehow it retains its previous animation styles?!

 

Component Code:

https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js

 

Video:

 

 

[ZachSaucier]

Hey iDVB. It's pretty hard to help given just the information. A minimal demo would be greatly appreciated. It's often best to recreate situations like these from scratch (hopefully without React, portals, or any of that stuff).

 

What are you trying to do with the this.paused(0).clear();? It's essentially the same as this.play().clear();. Are you trying to do something like this.pause(0).kill();?

[iDVB]

Trying to reset/clear the timeline animations and any of the styles on the elements in those animations but also to leave the empty timeline so it can be reused each time.

 

i suspect the Portal and the fact that the animation is popping in fresh each time is at the heart of the problem. 
 

Is it possible to clear all tweens from timeline and styles on elements but keep the actual empty timeline to be reused?

[iDVB]

I've added a codesandbox for this issue here... https://codesandbox.io/s/sharp-tree-ss9k7?file=/src/Circle.js

[ZachSaucier]

I think your issue is just that you have .paused(0) (which is equivalent to.play() like I said before) instead of .pause(0): https://codesandbox.io/s/elegant-proskuriakova-hfhw1?file=/src/Circle.js

[iDVB]

17 minutes ago, ZachSaucier said:

I think your issue is just that you have .paused(0) (which is equivalent to.play() like I said before) instead of .pause(0): https://codesandbox.io/s/elegant-proskuriakova-hfhw1?file=/src/Circle.js

 

 😳Oh     wow.  I can't believe that was it. a single character. 

 

When you first suggested it I even missed the spelling difference. 

I was also not familiar with there being those two similarly named functions. 

 

It fixed it! Thanks @ZachSaucier!

[ZachSaucier]

2 minutes ago, iDVB said:

I was also not familiar with there being those two similarly named functions.

Ya, they can be tricky  

 

Happy to help.