Best React Animation Libraries in 2026: What I Use in Next.js Apps and Why

The React animation libraries I use in 2026 come down to five, each for a different job. Motion (the library that used to be Framer Motion) is my default for component and gesture animation. GSAP is for timelines and scroll-driven storytelling, and it has been free for commercial use since 2025. React's own <ViewTransition>, stable since React 19.3 in September 2026, now handles route and list transitions that once needed a library. AutoAnimate covers lists you want animated with one line. React Spring stays for physics-heavy UI already built on it.

Most apps need one of these, sometimes two. Shipping three is how a marketing site ends up with a slow first load.

How I rank them

I score each library on four criteria that show up in real projects:

What it costs in the client bundle on the first page a visitor sees.
How it behaves with the App Router, where every animated component must be a Client Component.
Whether cleanup is automatic, because React Strict Mode runs effects twice in development.
Whether the next developer on the project can read the code without a tutorial.

Raw feature count is not on the list. Every one of these can animate opacity and transform.

1. Motion: the default for component animation

Motion is what I install first. The package is now motion and the React API imports from motion/react. The old framer-motion package is still published at the same version, 14.0.0 as of October 2, 2026, and it still gets about 49.4 million weekly downloads against 24 million for motion. Plenty of codebases have not changed the import yet. Version 14 has no public breaking changes. It removes internal shims and pins its own internal packages, so you can upgrade without rewriting components.

Motion fits React state well. You describe initial, animate, and exit, wrap conditional content in AnimatePresence, and layout animations work with the layout prop. Gestures like drag, hover, and tap come built in.

The catch is size. Motion's own docs say the full motion component cannot tree-shake below about 34 kB. The fix is LazyMotion with the slimmer m component, which drops the initial render cost to under 4.6 kB and lets you load features later:

TypeScript

1'use client'
2import { LazyMotion } from 'motion/react'
3import * as m from 'motion/react-m'
4
5const loadFeatures = () => import('./motion-features').then((mod) => mod.default)
6
7export function FadeIn({ children }: { children: React.ReactNode }) {
8  return (
9    <LazyMotion features={loadFeatures} strict>
10      <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
11        {children}
12      </m.div>
13    </LazyMotion>
14  )
15}

motion-features.ts exports domAnimation (about 15 kB, animations and exit) or domMax (about 25 kB, adds drag and layout). The strict flag throws if someone imports the full motion component inside, which saves you from a silent regression in review. For one-off imperative effects, useAnimate has a 2.3 kB mini version built on the Web Animations API.

2. GSAP: timelines, scroll, and text effects

When a designer hands over a landing page with pinned sections, staggered text reveals, and SVG morphing, I reach for GSAP. Since version 3.13 in April 2025, after Webflow acquired it, the whole toolset is free, including formerly paid plugins such as SplitText, MorphSVG, and ScrollSmoother. The license covers commercial use. One caveat: the license is GSAP's own "no charge" standard license, not MIT, and it rules out using GSAP to build a visual animation tool that competes with Webflow. For client sites and products that is not a problem. Read it once anyway.

In React, use the useGSAP() hook from @gsap/react. It replaces useEffect and reverts every tween, ScrollTrigger, and SplitText instance on unmount through gsap.context(). Pass a scope ref so selector strings only match inside your component. Wrap animations you create later, in a click handler for example, in contextSafe() or they leak. In the App Router the component needs 'use client'.

GSAP is imperative. That is its strength for choreography and its weakness for UI that changes with state. I do not use it for a dropdown.

3. React ViewTransition: route changes with no library

This one changed my defaults this year. React 19.3 made <ViewTransition> stable on September 9, 2026, and Next.js 16.4 ships with React 19.3. App Router navigations already run inside startTransition, so wrapping page content in <ViewTransition> animates route changes with no config flag. Next.js even removed the old experimental.viewTransition option because nothing read it.

By default, you get the browser's cross-fade. You style enter, exit, update, and shared-element ("share") animations with CSS classes on the view transition pseudo-elements, or drive them from onEnter and onExit callbacks with the Web Animations API. Give two elements on different pages the same name and the browser morphs one into the other.

Three rules save debugging time:

Plain setState does not trigger it. Only updates inside a Transition, a Suspense reveal, or useDeferredValue do.
A <ViewTransition> only runs enter and exit if it renders before any DOM node in its component.
Each shared name must be unique across the mounted app.

React does not respect prefers-reduced-motion for you here. Add the media query yourself. The Next.js guide also notes that transition types need Chromium 125 or a recent Safari or Firefox. Older browsers skip the animation, which is the failure mode you want.

4. AutoAnimate: one line for lists

@formkit/auto-animate does one job. Give it a parent element, and it animates its children as they enter, leave, or move. In React, useAutoAnimate() returns a ref for the parent. It respects prefers-reduced-motion out of the box. For a to-do list, a filterable table, or form errors that appear and disappear, this beats writing AnimatePresence by hand. It only watches immediate children, and it struggles with flex-grow children that resize late, so give those an explicit width.

5. React Spring: keep it where it already works

React Spring animates with spring physics instead of durations, and it still feels great for draggable cards and anything that should feel like it has mass. Version 10 added React 19 support and renamed SpringContext to SpringContextProvider. The early 10.0.x patches had bugs in the imperative API, so pin a recent 10.1 release if you upgrade. I keep React Spring in apps that already use it and seldom start new ones on it, because Motion covers springs too.

Worth knowing: Anime.js 4

Anime.js 4 (4.5.0 on npm, MIT) works with React through createScope({ root }) and scope.revert() in an effect cleanup. That makes it a fair GSAP alternative if you want an MIT license, but it has a smaller plugin set.

What I pick by project type

Product UI, dashboards, SaaS: Motion with LazyMotion, plus AutoAnimate for lists.
Marketing site with scroll storytelling: GSAP for the hero and sections, CSS transitions for everything else.
Content site or blog: <ViewTransition> for navigation and CSS for hover states. Often no library at all.
Existing React Spring app: stay on React Spring 10.1 and add <ViewTransition> for routes.

If you only need hover and focus effects, plain CSS transitions are still the right answer. For deeper Motion patterns like whileDrag and staggered variants, see my older post on animations in React with Framer Motion.