Basic Animation
Code
| 1 | const { controls } = useAnime({ |
| 2 | selector: '.box', |
| 3 | // Per-segment durations live inside keyframe objects, not at the top level. |
| 4 | translateX: [{ to: 120, duration: 600 }, { to: 0, duration: 400 }], |
| 5 | scale: [{ to: 1.2, duration: 300 }, { to: 1, duration: 300 }], |
| 6 | stagger: 80, |
| 7 | ease: 'inOutQuad', |
| 8 | autoplay: false, // trigger manually via controls.restart() |
| 9 | }) |
Animate targets with CSS selectors, stagger, easing, and callbacks.
Live preview
Basic AnimationCSS selectors, stagger, easing
A
B
C
D
E
Props
| Name | Type | Default | Description |
|---|---|---|---|
| selector | string | - | CSS selector to target |
| translateX | object[] | - | Keyframes with per-segment { to, duration } |
| stagger | number | 0 | Stagger delay between targets |
| ease | string | 'inOutQuad' | Easing function |
| autoplay | boolean | false | Start on mount (false = trigger via controls) |
| controls.restart | function | - | Replay the animation |