Issue with onInterrupt

[thanatos_proto]

1. have a new issue where the pause of the parent timeline is not triggering the interrupt event of the child timeline when I add a sub-timeline.

2.  I am getting unexpected property values in the onInterrupt callback, but they are normal in the onUpdate callback.（In console）

See the Pen KKGNMEo?editors=1111 by mowozy (@mowozy) on CodePen

[Cassie]

Hi there! 

Are you maybe expecting onInterrupt to fire when you pause the timeline?

Quote

'onInterrupt fires if/when the tween or timeline is killed before it completes'

 

At the moment I think it's firing because your useEffect gets called when the animationStatus changes, and that is killing the master timeline ref.

I think you may be looking for a paused event, here's a thread on why we don't have one of them
 

 

Could we maybe give it a bash without react to start off with? Just to make sure we understand your aim and what the issue is?

See the Pen MWBLwLX?editors=1011 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Yes, I think @Cassie is exactly right - the way you set things up causes the useLayoutEffect() to get called again every time you play/pause, thus it reverts() the original animations that were dropped into the timeline and then re-creates everything at that point. It looks to me like GSAP is behaving exactly as it should. 

 

You created your masterTimeline OUTSIDE of your gsap.context() which is probably not a good idea. Technically it's working now because all the tweens you're putting into the timeline are created inside the context, thus those get reverted but it seems rather odd to me that you'd leave the main timeline non-reverted and just keep adding stuff to that. When you kill() an animation, it should be considered dead...murdered...never to be resurrected  I'd recommend just creating that inside your gsap.context().