# How to Create Animated React Components Easily

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-04. 5 min read.
> Source: https://vp0.com/blogs/how-to-create-animated-react-components-easily

Animate transform and opacity, respect reduced motion, and let a library handle the spring. That is most of it.

**TL;DR.** The easy way to animate React components is to animate only transform and opacity (the two properties the browser can move on the GPU at 60fps), use a small library like Motion for springs and gestures instead of hand-writing keyframes, and always respect prefers-reduced-motion. For most UI, that is an animate wrapper plus an initial and animate state. When you generate components with AI, tell it those rules up front. Start from a clean component, like a free VP0 design at $0, so the animation has good structure to move.

Animating React components is easier than most tutorials make it look, once you know the two rules that do the heavy lifting. Animate the right properties, lean on a small library for the springs, and respect reduced motion. That covers the vast majority of UI animation, from a button that scales on tap to a card that slides in. Here is the simple path and how to get an AI builder to follow it. Start from a clean component, like a free [VP0](https://vp0.com) design (the free iOS and React Native design library AI builders read from) at $0, so the animation has good structure to move.

## Rule one: animate transform and opacity

This is the single most important thing. The browser can animate `transform` and `opacity` on the compositor, without recalculating layout or repainting, so they run smoothly at 60fps. Everything else is a trap. Animating `width`, `height`, `top`, `left`, or `margin` forces a layout pass on every frame and produces visible jank. So translate instead of changing `left`, scale instead of changing `width`, and fade with `opacity`. The performance guidance on [web.dev animations](https://web.dev/articles/animations-guide) and the [MDN transform docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) both come back to this point. Get this right and almost any animation feels smooth; get it wrong and no library will save you.

## Rule two: let a library handle the spring

You can hand-write `@keyframes`, but for interactive UI a small library is far easier. [Motion](https://motion.dev/) (formerly Framer Motion) is the common choice: you wrap an element in an animated component, give it an `initial` and an `animate` prop, and it interpolates with a spring. Gestures, layout animations, and exit animations come built in. The mental model is declarative, which fits React: you describe the states, not the frames.

| Need | Reach for | Why |
|---|---|---|
| Hover, focus, show and hide | CSS transition | Free, no dependency, instant |
| Spring, gesture, drag | Motion | Declarative states, physics built in |
| Enter and exit of a list | Motion `AnimatePresence` | Handles unmount timing for you |
| Complex timeline | Motion or CSS `@keyframes` | Orchestrated sequences |

Use CSS for the small stuff and a library for the rich interactions. The same "describe the result" approach guides motion on native too, the way [the Duolingo progress ring animation on iOS](/blogs/duolingo-progress-ring-animation-code-ios/) animates a single trimmed shape rather than redrawing.

## Rule three: respect reduced motion

Big parallax and slide effects make some people motion sick, so honor the `prefers-reduced-motion` media query and fall back to a simple fade or no motion when it is set. This is an accessibility requirement, not optional polish. In React, check the [prefers-reduced-motion media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) and gate your larger animations on it. Libraries make this easy, but you have to actually do it.

## Prompting AI for clean animation

AI builders tend to animate whatever property is closest to hand, which is how you get a janky `width` animation. So state the rules: "Animate only transform and opacity, use Motion for springs, and disable large motion under prefers-reduced-motion." Then start from a structured component so there is something clean to animate, the same discipline that keeps generated UI fast in [the iOS skeleton loaders in React Native](/blogs/ios-skeleton-loaders-ui-react-native/), and a reason performance bugs like [fixing SwiftUI memory leaks in AI-generated code](/blogs/swiftui-memory-leak-ai-generated-code-fix/) are worth catching early. For richer motion sources, [Lottie versus Rive for React Native AI apps](/blogs/lottie-vs-rive-for-react-native-ai-apps/) and [the Framer Motion AI generator over MCP](/blogs/framer-motion-ai-generator-mcp/) are good next reads.

## Key takeaways

- Animate only `transform` and `opacity`; they run on the GPU at 60fps.
- Never animate `width`, `height`, `top`, or `left`; they force layout every frame.
- Use CSS transitions for simple states, Motion for springs, gestures, and exits.
- Respect `prefers-reduced-motion`; it is an accessibility requirement.
- Prompt the AI with these rules, and start from a clean VP0 component at $0.

## Frequently asked questions

### What is the easiest way to animate a React component?

Use a library like Motion and animate only transform and opacity. Wrap the element in an animated component, give it an initial state and an animate state, and the library interpolates between them with a spring. That avoids hand-writing keyframes and keeps the animation on the GPU. For simple hover and tap effects, plain CSS transitions on transform and opacity are even simpler.

### Why should I only animate transform and opacity?

Because the browser can animate transform and opacity on the compositor without recalculating layout or repainting, so they run smoothly at 60fps. Animating width, height, top, left, or margin forces layout on every frame, which janks. Translate instead of changing left, scale instead of changing width, and fade with opacity. On React Native, the same discipline plus worklet rules is covered in [fixing Claude's Reanimated errors](/blogs/fixing-claude-react-native-reanimated-errors/).

### How do I make React animations accessible?

Respect the user's prefers-reduced-motion setting. Wrap large motion in a check for that media query and fall back to a simple fade or no motion when it is set. Many people get motion sick from big parallax and slide effects, so reduced-motion is not optional polish; it is a real accessibility requirement.

### Should I use a library or CSS for React animations?

Use CSS transitions for simple state changes (hover, focus, show and hide) because they are free and need no dependency. Reach for a library like Motion when you want springs, gesture-driven animation, layout animations, or orchestrated sequences. Most apps use both: CSS for the small stuff, a library for the rich interactions.

### What is the best way to add animation to AI-generated React components?

Prompt the model to animate only transform and opacity, use a spring library, and respect prefers-reduced-motion, then start from a clean component so the animation has good structure. A free VP0 design, the free iOS and React Native design library for AI builders, gives you that structured component to animate in Cursor or Claude Code at $0.

## Frequently asked questions

### What is the easiest way to animate a React component?

Use a library like Motion and animate only transform and opacity. Wrap the element in an animated component, give it an initial state and an animate state, and the library interpolates between them with a spring. That avoids hand-writing keyframes and keeps the animation on the GPU. For simple hover and tap effects, plain CSS transitions on transform and opacity are even simpler.

### Why should I only animate transform and opacity?

Because the browser can animate transform and opacity on the compositor without recalculating layout or repainting, so they run smoothly at 60fps. Animating width, height, top, left, or margin forces layout on every frame, which janks. Translate instead of changing left, scale instead of changing width, and fade with opacity.

### How do I make React animations accessible?

Respect the user's prefers-reduced-motion setting. Wrap large motion in a check for that media query and fall back to a simple fade or no motion when it is set. Many people get motion sick from big parallax and slide effects, so reduced-motion is not optional polish; it is a real accessibility requirement.

### Should I use a library or CSS for React animations?

Use CSS transitions for simple state changes (hover, focus, show and hide) because they are free and need no dependency. Reach for a library like Motion when you want springs, gesture-driven animation, layout animations, or orchestrated sequences. Most apps use both: CSS for the small stuff, a library for the rich interactions.

### What is the best way to add animation to AI-generated React components?

Prompt the model to animate only transform and opacity, use a spring library, and respect prefers-reduced-motion, then start from a clean component so the animation has good structure. A free VP0 design, the free iOS and React Native design library for AI builders, gives you that structured component to animate in Cursor or Claude Code at $0.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*