Effect

A handle to a running effect, returned by createEffect() and the built-in effects, such as confetti().

An effect starts as soon as it’s created, and ends by itself once its schedule is finished and the last particle has expired (i.e. died). You can use this handle to pause it, to let it wind down early with end(), or to stop it right away with stop().

Example

const effect = confetti(button);
effect.pause();
effect.resume();
effect.stop(); // removes the particles right away

Properties

finishedreadonlyPromise<EffectResult>

Settles once the effect is over: with "completed" when it ended by itself, including after end(), or with "stopped" when it ended early, because stop() was called or it threw while running. Never rejects.

Methods

end()

end(): void;

Stops the effect from emitting new particles, and lets the ones that are already alive finish their lifetime. The effect then ends by itself, and the finished promise resolves as "completed". Useful to turn off an effect that runs forever, like a stream with loops: Infinity.

On a paused effect, the remaining particles stay frozen until it’s resumed. Calling stop() afterwards still removes them right away. Calling it again, or after the effect has ended, has no effect.

pause()

pause(): void;

Freezes the effect: particles stop moving and stay visible where they are. Calling it while already paused has no effect.

resume()

resume(): void;

Continues a paused effect from where it was paused. The time spent paused is skipped, so particles do not jump ahead. Does nothing if the effect isn’t paused or has already ended.

stop()

stop(): void;

Ends the effect immediately and removes its particles. The finished promise resolves as "stopped", and the effect can’t be resumed afterwards. Calling it again has no effect.

The canvas the effect was drawn on is removed (or, if you provided it, cleared) once no other effect is drawing on it. To let the particles finish their lifetime instead, use end().