Getting Started with Motion One Animations

Animations can transform a good website into a great one. Motion One is a modern animation library that makes adding animations simple and performant.

Why Motion One?

Motion One offers several advantages:

Tiny bundle size - Under 3KB gzipped
Hardware accelerated - Smooth 60fps animations
Simple API - Easy to learn and use
Spring physics - Natural-feeling motion

Basic Animation

Here’s how to animate an element:

import { animate } from "motion";

animate(".box", { transform: "translateX(100px)" }, { duration: 0.5 });

Animating Multiple Properties

You can animate multiple properties at once:

animate(
  ".hero-title",
  {
    opacity: [0, 1],
    y: [20, 0],
  },
  {
    duration: 0.6,
    easing: "ease-out",
  },
);

Staggered Animations

Create beautiful staggered effects:

import { animate, stagger } from "motion";

animate(".card", { opacity: [0, 1], y: [20, 0] }, { delay: stagger(0.1) });

Best Practices

Animate transform and opacity - These are GPU-accelerated
Use appropriate easing - ease-out for entrances, ease-in for exits
Keep it subtle - Animation should enhance, not distract
Respect motion preferences - Honor prefers-reduced-motion

Conclusion

Motion One makes it easy to add polished animations to your projects. Start simple and build up complexity as you get comfortable with the API.

Happy animating! ✨