Why Framer Motion is the Default Animation Library for React in 2026

Framer Motion has established itself as the definitive animation library for React applications. The library's declarative API — where animations are described as component props rather than JavaScript imperative code — aligns naturally with React's component model and produces animations that are easier to maintain and debug than equivalent imperative implementations. The performance characteristics are also excellent: Framer Motion uses the Web Animations API and hardware-accelerated CSS properties by default, producing 60fps animations even on mobile devices.

The ecosystem adoption is comprehensive. Linear, Vercel, Raycast, and most premium SaaS products in 2026 use Framer Motion for their UI animations. The library is actively maintained with regular updates, and the documentation quality is excellent. For React developers in 2026, learning Framer Motion is essential for building interfaces that meet modern quality expectations.

Core Concepts: motion Components and animate Prop

Every HTML element has a Framer Motion equivalent prefixed with motion — motion.div, motion.button, motion.section. Apply the animate prop to any motion component with an object of CSS properties to animate to. Framer Motion automatically creates a smooth transition from the element's current state to the animated state. The initial prop defines the starting state, and the exit prop defines the state when the component is removed from the DOM (used with AnimatePresence).

The transition prop controls how the animation plays — duration, delay, easing, and spring parameters. Framer Motion uses spring physics by default, which produces more natural-feeling animations than CSS easing functions. For UI animations, spring physics with a stiffness of 300-500 and damping of 20-30 produces the snappy, responsive feel characteristic of premium interfaces.

Variants for Coordinated Animations

Variants define named animation states that can be propagated through a component tree. Define a parent motion component with variants (hidden and visible states), apply the same variant names to children, and Framer Motion automatically orchestrates the animation sequence across the entire tree. The staggerChildren property in the transition configuration staggers the animation start time of each child, creating the cascade effect seen in list items appearing one after another.

Gestures: Hover, Tap, Drag

Framer Motion provides built-in gesture animations through the whileHover, whileTap, and whileDrag props. These props accept the same animation object as animate, defining what state the element animates to during each gesture. A button with whileHover={{ scale: 1.03 }} and whileTap={{ scale: 0.97 }} creates the physical push-down button interaction that users respond to positively. Drag animations use the drag prop with constraints to create draggable cards, sliders, and reorderable lists.

Scroll Animations with useScroll and useTransform

Framer Motion's useScroll hook tracks scroll progress and useTransform maps scroll values to animation values. This combination produces parallax effects, scroll-triggered color transitions, and elements that scale or move based on scroll position. For scroll-triggered entrance animations (the most common scroll animation pattern), use the whileInView prop — the simplest possible implementation of scroll-triggered animations, requiring zero manual Intersection Observer setup.

Layout Animations

Layout animations are Framer Motion's most powerful and unique feature. Add the layout prop to any motion component and Framer Motion automatically animates any layout change — position, size, flex/grid reflow — with smooth interpolation. Reordering items in a list, expanding an accordion, switching between grid and list view — all animate automatically with a single prop. The layoutId prop extends this to shared element transitions, where an element animates from its position in one state to its position in another state, even if they are different DOM nodes.

Download free React components with Framer Motion animations pre-built at proofmatcher.com. Our template library includes animated hero sections, transition systems, hover cards, and scroll-triggered section reveals — all ready to drop into your Next.js or React application.

Framer Motion Is Now Called Motion

In late 2024 Framer Motion became an independent project and was renamed Motion. The API you learned above is the same, but new projects install the motion package and import React components from motion/react, for example import { motion, AnimatePresence } from "motion/react". Existing projects that still import from framer-motion continue to work, so there is no rush to migrate, but documentation, examples, and new features now live under the Motion name.

Exit Animations with AnimatePresence

React removes components from the DOM immediately, which normally makes exit animations impossible. AnimatePresence solves this by keeping a component mounted until its exit animation finishes. Wrap any conditionally rendered motion component in AnimatePresence, give it a stable key, and define initial, animate, and exit states. This is the pattern behind animated modals, toasts, dropdown menus, and page transitions.

Two props control how several children enter and leave. mode="wait" waits for the old element to finish exiting before the new one enters, which suits page transitions and step-by-step wizards. mode="popLayout" removes exiting elements from the layout immediately so surrounding items can animate into the free space, which works well for lists where items are deleted.

Shared Element Transitions with layoutId

Give two different components the same layoutId and Motion animates smoothly between them when one replaces the other. A thumbnail can expand into a full-screen detail view, or an active tab indicator can glide between tabs, with no manual position calculations. Combine layoutId with AnimatePresence when the elements mount and unmount, and use the LayoutGroup component when separate parts of the page need to coordinate their layout animations.

Spring, Tween, and Stagger

By default, Motion uses spring physics for movement and tween animations for properties like opacity and colour. Springs feel natural because they respond to velocity, which matters for drag and gesture interactions. Tune them with stiffness and damping, or use the simpler bounce and duration options. For lists, set staggerChildren in the parent variant's transition so each child animates slightly after the previous one; a delay of 0.04 to 0.08 seconds per item keeps the effect lively without making users wait.

Performance and Bundle Size

Motion is fast, but a few habits keep animations smooth on low-end phones:

• Animate transform and opacity. Properties like x, y, scale, rotate, and opacity are hardware accelerated. Animating width, height, or top forces layout on every frame; use the layout prop instead when size or position changes.
• Reduce the bundle. For pages that only need basic animations, use LazyMotion with the lightweight m component and load the full feature set only where drag or layout animations are needed.
• Animate on scroll with whileInView. whileInView with viewport={{ once: true }} runs entrance animations only when an element becomes visible, and only once.
• Avoid animating many elements at once. Hundreds of simultaneously animating items will strain any library. Animate the container or the visible items only.

Respecting Reduced Motion

Some users experience dizziness or nausea from movement on screen and turn on the reduced motion setting in their operating system. Motion makes it easy to respect this. Wrap your app in MotionConfig with reducedMotion="user" to automatically disable transform and layout animations for those users while keeping opacity fades, or read the setting directly with the useReducedMotion hook and choose a simpler animation. Treat animation as an enhancement: every screen should work and make sense with motion turned off.

Common Mistakes to Avoid

The most frequent problems come from missing or unstable keys inside AnimatePresence, which stop exit animations from running; conditional rendering placed outside AnimatePresence instead of inside it; and animations that are simply too long. Keep most interface animations between 150 and 400 milliseconds, reserve longer animations for large page transitions, and test on a real phone before shipping. You can find ready-made animated sections built with these patterns in the ProofMatcher component library.