Function animateEvents

Svelte doesn't provide any events for the animate directive.

The provided function below wraps a Svelte animate directive function generating bubbling events for start & end of animation.

These events are animate:start and animate:end.

This is useful for instance if you are animating several nodes in a scrollable container where the overflow parameter needs to be set to none while animating such that the scrollbar is not activated by the animation.

Optionally you may also provide a boolean writable store that will be set to true when animation is active. In some cases this leads to an easier implementation for gating on animation state.

const flipWithEvents = animateEvents(flip);
</script>

<main on:animate:start={() => console.log('animate:start')
      on:animate:end={() => console.log('animate:end')}>
   {#each someData as entry (entry.id)}
      <section animate:flipWithEvents />
   {/each}
Copy

const isAnimating = writable(false);
const flipWithEvents = animateEvents(flip, isAnimating);
</script>

<main class:no-scroll={$isAnimating}>
   {#each someData as entry (entry.id)}
      <section animate:flipWithEvents />
   {/each}
Copy