motion()
viewmotion
Returns an object of HTML attributes (data-motion + style) that can be spread onto any
element. Designed for Astro and SSR frameworks.
Signature
function motion(config: MotionConfig): Record<string, string>;Options
| Property | Type | Default | Description |
|---|---|---|---|
preset | string | — | Animation preset name (required) |
delay | number | 0 | Delay before animation starts (ms) |
duration | number | 600 | Animation duration (ms) |
Return value
Returns a plain object with the data-motion attribute ready to be spread:
// Returns:
{
"data-motion": '{"preset":"fade-up","delay":200}'
}Usage in Astro
---
import { motion } from "viewmotion";
---
<h1 {...motion({ preset: "fade-up", delay: 200 })}>Hello world</h1>
<p {...motion({ preset: "fade-up", duration: 800 })}>Longer animation</p>