How to activate confetti on out?

[Bewinxed]

I'm new to svelte, try to make an element explode on exit.

How do I use this in on:out?

[PuruVJ]

If I understand your question correctly, you want confetti to go off when an element is destroyed?

If that's the case, you can write code like this:

<script>
let isConfettiVisible = false;

function triggerConfettiOnDestroy(node) {
  return {
    destroy() {
      isConfettiVisible = true;
    }
  }
}
</script>

<div use:triggerConfettiOnDestroy> Destroying me will trigger confetti </div>

{#if isConfettiVisible}
  <div use:confetti />
{/if}

What is on:out listener? Never heard of it 😅

[zakaria-chahboun]

@PuruVJ I guess he want to destroy the confetti div parent, something like triggering an event when confetti animation is terminated (e.g on:exit event)

<script>
let isConfettiVisible = true;

function exit(){
  isConfettiVisible = false;
}
</script>

{#if isConfettiVisible}
<div class="some classes">
  <Confetti on:exit={exit}/>
</div>
{/if}