How to stop animation

[SeamonsterDeneb]

I like the School Pride example, but on activation I want to change my trigger button into a pause button that visitors can use in case they find the flurry of confetti too much for them. Is there a way to prematurely stop the animation with a function outside the confetti() function?

[leonklingele]

See the example at https://www.kirilv.com/canvas-confetti/#continuous:

What you could probably do here:

let stopAnimation = false;

const colors = ['#bb0000', '#ffffff'];
(function frame() {
  confetti({
    particleCount: 2,
    angle: 60,
    spread: 55,
    origin: { x: 0 },
    colors: colors
  });
  confetti({
    particleCount: 2,
    angle: 120,
    spread: 55,
    origin: { x: 1 },
    colors: colors
  });

  if (!stopAnimation) {
    requestAnimationFrame(frame);
  }
}());

<button on:click={{ stopAnimation = !stopAnimation; }}>Toggle animation</button>

[Coding-Professional]

you can simply use this line in your code ....

confetti.reset() // to stop the animation