:animate

An animation is triggered when the contents of an AnimationGroup component are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the AnimationGroup component changes. Animate directive must be on an element that is an immediate child of an AnimationGroup component.

Animations can be used with built-in animation functions or custom animation functions.

// When `list` is reordered the animation will run.
<AnimationGroup>
  <For each={list()}>{(item) => <li use:animate={flip}>{item}</li>}</For>
</AnimationGroup>

Animation Parameters

As with transitions, animations can have parameters.

<AnimationGroup>
  <For each={list()}>
    {(item) => (
      <li use:animate={(node, rects) => flip(node, rects, { delay: 500 })}>
        {item}
      </li>
    )}
  </For>
</AnimationGroup>

Custom animation functions

animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
  delay?: number,
  duration?: number,
  easing?: (t: number) => number,
  css?: (t: number, u: number) => string,
  tick?: (t: number, u: number) => void
}

Animations can use custom functions that provide the node, an animation object and any parameters as arguments. The animation parameter is an object containing from and to properties each containing a DOMRect describing the geometry of the element in its start and end positions. The from property is the DOMRect of the element in its starting position, and the to property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.

If the returned object has a css method, Solivelte will create a web animation that plays on the element.

The t argument passed to css is a value that goes from 0 and 1 after the easing function has been applied. The u argument is equal to 1 - t.

The function is called repeatedly before the animation begins, with different t and u arguments.

import { cubicOut } from "solivelte";

function whizz(
  node: HTMLElement,
  { from, to }: { from: DOMRect, to: DOMRect },
  params: any
): AnimationConfig {
  const dx = from.left - to.left;
  const dy = from.top - to.top;

  const d = Math.sqrt(dx * dx + dy * dy);

  return {
    delay: 0,
    duration: Math.sqrt(d) * 120,
    easing: cubicOut,
    css: (t, u) =>
      `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`,
  };
}

<AnimationGroup>
  <For each={list()}>{(item) => <li use:animate={whizz}>{item}</li>}</For>
</AnimationGroup>;

A custom animation function can also return a tick function, which is called during the animation with the same t and u arguments.

If it’s possible to use css instead of tick, do so — web animations can run off the main thread, preventing jank on slower devices.

import { cubicOut } from "solivelte";

function whizz(
  node: HTMLElement,
  { from, to }: { from: DOMRect, to: DOMRect },
  params: any
) {
  const dx = from.left - to.left;
  const dy = from.top - to.top;

  const d = Math.sqrt(dx * dx + dy * dy);

  return {
    delay: 0,
    duration: Math.sqrt(d) * 120,
    easing: cubicOut,
    tick: (t, u) =>
      Object.assign(node.style, { color: t > 0.5 ? "Pink" : "Blue" }),
  };
}

<AnimationGroup>
  <For each={list()}>{(item) => <div use:animate={whizz}>{item}</div>}</For>
</AnimationGroup>;