Skip to main content

svelte/animate

Edit this page on GitHub

The svelte/animate module exports one function for use with Svelte animations.

flip

ts
function flip(
node: Element,
{
from,
to
}: {
from: DOMRect;
to: DOMRect;
},
params?: FlipParams
animate:flip={params}

The flip function calculates the start and end position of an element and animates between them, translating the x and y values. flip stands for First, Last, Invert, Play.

flip accepts the following parameters:

  • delay (number, default 0) — milliseconds before starting
  • duration (number | function, default d => Math.sqrt(d) * 120) — see below
  • easing (function, default cubicOut) — an easing function

duration can be provided as either:

  • a number, in milliseconds.
  • a function, distance: number => duration: number, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.

You can see a full example on the animations tutorial.

<script>
  import { flip } from 'svelte/animate';
  import { quintOut } from 'svelte/easing';

  let list = [1, 2, 3];
</script>

{#each list as n (n)}
  <div animate:flip={{ delay: 250, duration: 250, easing: quintOut }}>
    {n}
  </div>
{/each}

Types

AnimationConfig

ts
interface AnimationConfig {}
ts
delay?: number;
ts
duration?: number;
ts
easing?: (t: number) => number;
ts
css?: (t: number, u: number) => string;
ts
tick?: (t: number, u: number) => void;

FlipParams

ts
interface FlipParams {}
ts
delay?: number;
ts
duration?: number | ((len: number) => number);
ts
easing?: (t: number) => number;