viewmotion

registerPreset()

viewmotion

Register a custom animation preset. Must be called before initMotion().

Signature 

function registerPreset(name: string, definition: PresetDefinition): void;

Parameters

ParameterTypeDescription
namestringUnique name for the preset
definitionPresetDefinitionObject describing the animation keyframes and settings

PresetDefinition

PropertyTypeRequiredDescription
keyframesstringYesName of the CSS @keyframes rule you define in your stylesheet

Example

  1. Define the @keyframes in your CSS: 
@keyframes my-flip {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0);
  }
}
  1. Register the preset before calling initMotion(): 
import { registerPreset, initMotion } from "viewmotion";

// Register before init
registerPreset("flip-in", { keyframes: "my-flip" });

await initMotion();

viewmotion automatically injects the hide and reveal CSS rules for the new preset. Use it exactly like any built-in preset: 

<div data-motion='{"preset":"flip-in"}'>Custom animation!</div>

Order matters

registerPreset() must be called before initMotion(). Presets registered after initialization have no effect on elements already being observed.

stagger() Configuration