Custom animations

Built-in presets not enough? Register your own with registerPreset().

How it works

registerPreset() links a preset name to a CSS @keyframes rule you define in your stylesheet. viewmotion automatically injects the required hide and reveal CSS rules for the new preset. This keeps all animation logic in CSS — no JS-driven motion.

Registering a custom preset

Step 1 — Define the @keyframes in your CSS file:

@keyframes my-slide-rotate {
  from {
    opacity: 0;
    transform: translateX(-30px) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

Step 2 — Register the preset before calling initMotion():

import { registerPreset, initMotion } from "viewmotion";

registerPreset("slide-rotate", { keyframes: "my-slide-rotate" });

await initMotion();

Preset definition

A preset definition object accepts the following property:

Using a custom preset

Once registered, use the preset name just like any built-in preset:

<h1 data-motion='{"preset":"slide-rotate"}'>Custom animation!</h1>