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.

    Parameters

    • fn: (
          node: Element,
          data: { from: DOMRect; to: DOMRect },
          ...rest: any,
      ) => AnimationConfig

      A Svelte animation function.

    • Optionalstore: MinimalWritable<boolean>

      An optional boolean minimal writable store that is set to true when animation is active.

    Returns (
        node: Element,
        data: { from: DOMRect; to: DOMRect },
        ...rest: any,
    ) => AnimationConfig

    Wrapped animation function.

    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}

    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}

Settings

Member Visibility