Animations

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.

Preview

Shuffle

1

2

3

4

5

6

7

8

9

Code

import { createSignal, For, type Component } from "solid-js";
import { animate, AnimationGroup, flip } from "solivelte";

function shuffle<T>(array: T[]): T[] {
  return array.sort(() => Math.random() - 0.5);
}

export const AnimationExample: Component = () => {
  const [list, setList] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9]);

  return (
    <>
      <button onClick={() => setList((p) => shuffle([...p]))}>
        Shuffle
      </button>
      <div>
        <AnimationGroup>
          <For each={list()}>
            {(item) => (
              <div use:animate={flip}>
                {item}
              </div>
            )}
          </For>
        </AnimationGroup>
      </div>
    </>
  );
};

Adding parameters

Animations can have parameters:

Preview

Shuffle

1

2

3

4

5

6

7

8

9

Code

import { createSignal, For, type Component } from "solid-js";
import { animate, AnimationGroup, flip } from "solivelte";

function shuffle<T>(array: T[]): T[] {
  return array.sort(() => Math.random() - 0.5);
}

export const AnimationExample: Component = () => {
  const [list, setList] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9]);

  return (
    <>
      <button onClick={() => setList((p) => shuffle([...p]))}>
        Shuffle
      </button>
      <div>
        <AnimationGroup>
          <For each={list()}>
            {(item) => (
              <div use:animate={(node, rects) => flip(node, rects, { duration: 2000 })}>
                {item}
              </div>
            )}
          </For>
        </AnimationGroup>
      </div>
    </>
  );
};

Custom CSS animations

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.

Preview

Shuffle

1

2

3

4

5

6

7

8

9

Code

import { createSignal, For, type Component } from "solid-js";
import { animate, AnimationGroup, cubicOut, type AnimationConfig } from "solivelte";

function shuffle<T>(array: T[]): T[] {
  return array.sort(() => Math.random() - 0.5);
}

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);`,
  };
}

export const AnimationExample: Component = () => {
  const [list, setList] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9]);

  return (
    <>
      <button onClick={() => setList((p) => shuffle([...p]))}>
        Shuffle
      </button>
      <div>
        <AnimationGroup>
          <For each={list()}>
            {(item) => (
              <div use:animate={whizz}>
                {item}
              </div>
            )}
          </For>
        </AnimationGroup>
      </div>
    </>
  );
};

Custom JS animations

While you should generally use CSS for animations as much as possible, there are some effects that can’t be achieved without JavaScript:

Preview

Shuffle

1

2

3

4

5

6

7

8

9

Code

import { createSignal, For, type Component } from "solid-js";
import { animate, AnimationGroup, cubicOut, type AnimationConfig } from "solivelte";

function shuffle<T>(array: T[]): T[] {
  return array.sort(() => Math.random() - 0.5);
}

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,
    tick: (t, u) =>
      Object.assign(node.style, { color: t > 0.5 ? "white" : "blue" }),
  };
}

export const AnimationExample: Component = () => {
  const [list, setList] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9]);

  return (
    <>
      <button onClick={() => setList((p) => shuffle([...p]))}>
        Shuffle
      </button>
      <div>
        <AnimationGroup>
          <For each={list()}>
            {(item) => (
              <div use:animate={whizz}>
                {item}
              </div>
            )}
          </For>
        </AnimationGroup>
      </div>
    </>
  );
};