How do I exit the "update" script?

[shigimcp]

Hi!

I'm a bit of a noob, so I'm not even sure if I'm using the right approach here (even though I'm getting exactly what I'm looking for visually)...

You can check out the demo here: https://shigimcp.github.io/gsap2020/

• To replay, you can click on the banner itself or use the last item on the menu (JBJA_10263). It's still a bit buggy, but I'm obsessing about this one issue right now.

You can check out the code here: https://github.com/shigimcp/gsap2020/blob/master/src/banners/CR_10263_J_by_JENNIFER_ANISTON_Kohls_300x250/JBJA_10263.jsx

• I'm using React (via create-react-app)
• The particle code starts at line 172 (const addPixi = useCallback((thisContainer, numParticle) => {... )

My problem:

• The particle animation dies out after 2 seconds as expected ("emitterLifetime": 2), but the update script keeps running ad infinitum.
• It's a problem on it's own, but I understand that Single Page Apps have the added problem of letting scripts run even when you "navigate away" so the update script keeps running even after clicking on another banner, so I need to stop updating.

Question: - How do I exit the "update" script after the particle animation is done, i.e. emitterLifetime has expired?

Thanks for any help/guidance you guys can provide!

[andrewstart]

Instead of emitter.emit = true, you would want to use emitter.playOnce(() => { /* do cleanup */ }). Alternatively, you could use emitter.playOnceAndDestroy(() => { /* do cleanup */}) which would attach the emitter to PixiJS's shared ticker that your PIXI.Application is already using and will destroy the emitter as well once it completes. In both cases, however, you'd want to destroy the Application when you are done rendering (and possibly remove the canvas from the DOM).

Side note: the animation isn't complete when emitterLifetime has expired - that's just when it stops emitting particles. Both of the methods I mentioned perform the complete callback after all particles have died out, when the animation is truly complete.

[shigimcp]

Falls to ground. Breaks down in tears. THANKYOU!!!THANKYOU!!!THANKYOU!!!

I can't tell you how much time I spent and how many ways I tried to get out of that "update" loop... SMH. Your solution is so simple and so elegant! (Man, what a miss on my part; my NOOB flag is truly flyin' in FULL glory for all to laugh at. LOL!)

And thanks for clarifying emitterLifetime! Everything makes much more sense now.

Skips off into sunset to find more trouble to get into...