animation
Animate components and page changes, and respect the visitor's reduced-motion setting.
What it is
@kitr/animation is Motion for React with shared timings. transitions and presets keep durations consistent, <Reveal> shows content as it scrolls in, and pageTransitions() animates route changes. When a visitor asks for less motion, movement turns off everywhere.
Runs in the browser on every kitr platform. For scenes with a camera, use 3d.
Install
kitr add animationFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
Adds @kitr/animation with Motion, its provider and config/animation.ts. Every change.
Quick start
A toast that rises in when an invoice is sent and falls away when it closes:
// app/components/invoice-sent-toast.tsx
import { AnimatePresence, motion, presets } from '@kitr/animation'
export function InvoiceSentToast({ invoice, onClose }: { invoice: string | null; onClose: () => void }) {
return (
<AnimatePresence>
{invoice && (
<motion.div key={invoice} role="status" className="toast" {...presets.fadeUp}>
Invoice {invoice} sent to [email protected]
<button type="button" onClick={onClose}>
Close
</button>
</motion.div>
)}
</AnimatePresence>
)
}The toast fades in while rising, and fades out before it leaves the DOM. With reduced motion on, both happen instantly. Next in the guide: Animate your first component.
Built on
On top, kitr adds:
| What kitr adds | Why |
|---|---|
animationProvider and config/animation.ts |
One place for the app's durations, easings and the reduced-motion policy. |
transitions and presets |
Named timings (fast, normal, slow) and enter/exit presets, shared by every component. |
<Reveal> |
Content that appears as it scrolls into view, with the reduced-motion rule applied. |
pageTransitions() |
Animated route changes through the browser's View Transitions API, wired to router. |
prefersReducedMotion() |
The same check the provider uses, for your own code. |
kitr adds the provider, the shared timings, <Reveal>, page transitions and the reduced-motion switch.
Problems it solves
- Timings that differ on every screen. Use the shared timings.
- Reinventing enter and exit animations. Enter and exit with presets.
- Page changes that jump. Animate page changes.
- A card that should become its page. Morph a card into its page.
- Motion that makes some visitors ill. Respect reduced motion in your own code.
- Lists and layouts that reflow abruptly. Animate layout changes.