Guides · · Maxwell Prehoda
12 Framer Motion Alternatives in 2026, From GSAP to Plain CSS
First, a naming update: Framer Motion is now Motion. You install the motion package, import from motion/react, and it also runs in vanilla JavaScript and Vue. So before you switch, check whether your reason for leaving still holds. If you want timelines and scroll scenes, GSAP (now free, plugins included) is the main alternative. If you want physics springs, React Spring. If you only animate lists, AutoAnimate does it in one line. And for enter, exit and hover motion, modern CSS and React's new ViewTransition component cover more than they did a year ago.
We read each library's own docs and release notes in November 2026 and kept only options that are maintained and do something Motion does not, or do it with less.
1. GSAP: Best for timeline-heavy marketing pages and scroll scenes
Platform: JavaScript, works with any framework; free including all plugins
GSAP is the alternative people reach for when the animation is choreography: a hero where eight elements enter in a precise order, a pinned scroll story, a text reveal split by lines. Its timelines let you sequence and overlap tweens without juggling delays, ScrollTrigger scrubs and pins against scroll, and the Flip plugin does layout animation by recording an element's state, letting you change the DOM, then animating from the old position. That covers the job Motion's layout prop does, including reparenting into transformed containers.
Since GSAP 3.13 in April 2025, Webflow has made the whole toolset free for commercial use, including SplitText and MorphSVG, which used to need a paid membership. For reduced motion, gsap.matchMedia() runs a full animation or a gentler one depending on prefers-reduced-motion and reverts automatically when the query stops matching.
Our Word by Word Text Animation below is a pure-CSS take on the kind of staggered reveal GSAP is famous for. It works for one headline; once you need to sequence it with everything else on the page, a timeline is easier.
Watch out for: The API is imperative, so in React you manage refs and cleanup yourself instead of describing state declaratively. The free license also prohibits using GSAP inside no-code visual animation builders that compete with Webflow without written consent.
2. Motion's own mini animate(): Best for keeping Motion's API at a fraction of the bundle
Platform: motion package, vanilla JS, React and Vue; free and open source
A surprising number of people searching for an alternative want the same library, lighter. Motion now starts at 3.2 kB with its mini animate function, and LazyMotion loads features as you need them. Motion says most of its animations run on the browser's own animation engine, and scroll effects use the native ScrollTimeline where the browser supports it.
If you liked the API and only resented the weight, or you left because it used to be React-only, try this before rewriting anything.
Watch out for: The mini function trades away React conveniences like the layout prop and exit animations, so check which features you actually use before you switch. Motion+ (examples, Motion UI components, the Motion Studio editor) is a separate paid product; the core library stays free.
3. React Spring: Best for physics springs in React, including three.js scenes
Platform: React; @react-spring/web, native, three, konva and zdog; MIT
React Spring builds every animation on spring physics instead of fixed durations and easing curves. As its docs put it, springs have no defined curve or set duration, which is why the motion feels continuous when a user interrupts it halfway. The same API targets the DOM, React Native, react-three-fiber, Konva and Zdog, which makes it a natural pick for teams animating a 3D scene and its surrounding UI with one mental model.
Choose it when interactions are gesture-driven and interruptible, like a draggable sheet, rather than timed sequences.
Our Elastic Spring Animation below is a pure-CSS take on spring motion: the overshoot is baked into a linear() easing curve. It looks like a spring but cannot respond to velocity the way a real spring library can.
Watch out for: Because springs have no duration, matching a designer's spec written in milliseconds, or syncing a spring to a timed sequence, takes extra tuning. It is React-first, so it does not help a vanilla or Vue codebase.
4. AutoAnimate: Best for list, accordion and toast animations in one line
Platform: React, Vue, Svelte, Solid, Angular, Preact, vanilla JS; MIT
AutoAnimate from FormKit is not an animation library so much as a default: point it at a parent element and its children animate when they are added, removed or moved. Its own site calls it Prettier for motion. In React it is a single useAutoAnimate hook; Vue gets a directive.
If your Motion usage is mostly AnimatePresence around lists and reorderable items, this replaces it with almost no code. It also disables itself automatically when the user has reduced motion turned on, which most libraries leave to you.
Our Staggered List Entrance below is a pure-CSS take on list motion, for rows that only need to animate in once.
Watch out for: Only immediate children animate, flex children with flex-grow can misbehave until you give them a width, and it sets position: relative on a static parent. Hover and styling changes still belong in CSS transitions.
5. Anime.js v4: Best for a small all-in-one engine outside React
Platform: JavaScript, any framework; free
Anime.js has been rebuilt as v4, and its feature list now reads like a lighter GSAP: a timeline API, a scroll observer with sync modes, a draggable module with spring release, and SVG utilities for shape morphing, line drawing and motion paths. The full bundle is listed at 24.5 KB, and individual modules range from 0.22 KB to 6.41 KB, so you can import only the pieces you use.
It is a good fit for vanilla sites, Astro or Svelte projects that want one capable engine without React-specific components.
Watch out for: Much of the tutorial material online was written for v3, so check that examples match the v4 docs before you copy them. There is no declarative React layer like Motion's motion components.
6. React ViewTransition: Best for route and list transitions in React 19.3 and later
Platform: React 19.3+, DOM only
React 19.3, released in September 2026, made the ViewTransition component stable. Wrap part of your tree in it and React animates elements as they enter, exit, update or move between two places using the browser's View Transition API, cross-fading by default. You style the animation in CSS with view transition classes, or drive it from onEnter and onExit callbacks with the Web Animations API, and addTransitionType lets the same change animate differently for forward and back navigation.
This is the closest thing to Motion's shared layout animation that is built into React itself, with no animation library in the bundle.
Our Dark Mode Toggle below is a pure-CSS take on the circular theme reveal that people often build with view transitions.
Watch out for: Only updates inside a Transition animate (startTransition, Suspense reveals, useDeferredValue); a plain setState will not. It works only in the DOM, not React Native, and React does not handle prefers-reduced-motion for you. Same-document view transitions only reached Baseline in October 2025, when Firefox 144 shipped them.
7. CSS transitions, @starting-style and linear() springs: Best for enter, exit and hover motion with no JavaScript
Platform: CSS, all modern browsers; free
Two of the old reasons to install Motion were exit animations and springs. CSS now does both. @starting-style sets the values an element transitions from when it first renders, and transition-behavior: allow-discrete lets display: none take part in a transition, so a panel can fade in on mount and fade out before it disappears. Both are Baseline since August 2024. The linear() easing function, Baseline widely available since December 2023, draws spring and bounce curves as a list of points.
Hover states, focus rings, toggles, popovers and dialogs rarely need a library. Writing them in CSS keeps them working before your JavaScript hydrates.
Our Spring Toggle Switch below uses two linear() spring curves, with a cubic-bezier fallback, so the knob overshoots and the dot inside it wobbles after landing.
Watch out for: CSS cannot animate in response to gesture velocity, and orchestrating many elements across components gets brittle with hand-tuned delays. Animating height to auto still needs interpolate-size, which only Chromium browsers support so far.
8. tw-animate-css: Best for enter and exit utilities in Tailwind v4 projects
Platform: Tailwind CSS v4 plugin, pure CSS; MIT
If your stack is Tailwind and your Motion usage is mostly fade and slide on menus and dialogs, tw-animate-css is a CSS-only replacement for the old tailwindcss-animate plugin, rebuilt for Tailwind v4. Add one import and you get animate-in and animate-out with composable fade, slide, zoom, spin and blur utilities, plus duration, delay and easing modifiers and ready-made accordion and collapsible animations that read Radix-style content-height variables.
Component libraries built on Radix primitives already toggle data attributes for open and closed states, so these utilities slot straight into that pattern.
Watch out for: It is utility classes over keyframes, so anything that needs to interrupt smoothly mid-flight or follow a gesture is out of scope. The README warns that v2.0.0 will bring breaking changes.
9. Your framework's built-in transitions: Best for Svelte and Vue apps that only need enter and leave
Platform: Svelte transition directive, Vue Transition component; free
Outside React, the framework may already ship what you are installing Motion for. Svelte's transition directive animates elements entering and leaving the DOM, can reverse smoothly mid-transition, and is driven by the Web Animations API. Vue's built-in Transition component applies enter and leave classes you style with CSS.
Reach for these first and add a library only for the one screen that needs more.
Watch out for: Svelte's docs point out that because its transitions run through the Web Animations API, a global prefers-reduced-motion CSS rule does not affect them; you have to check the preference in code. Vue's Transition works on a single element or component, so lists need TransitionGroup.
10. React Native Reanimated 4: Best for React Native apps that need 60 to 120 fps motion
Platform: React Native, New Architecture required; free
Motion targets the web. On React Native the standard is Reanimated from Software Mansion, which runs animations on the UI thread so they stay smooth while JavaScript is busy. Version 4, stable since July 2025, added a CSS-style animations and transitions API for state-driven motion, while worklets and shared values remain the tool for gestures, scroll and screen transitions.
It pairs with React Native Gesture Handler for draggable sheets and swipe actions, and supports layout animations for views entering and leaving.
Watch out for: Reanimated 4 requires the React Native New Architecture, so older apps must migrate first or stay on version 3.
11. Our CSS snippet directories: Best for copy-paste hover, loader and toggle motion, no dependency
Platform: Motions directory, free; HTML plus CSS Ours
See every signal
Live dashboards that update the moment your data lands.
A lot of Motion code in real apps is whileHover lifts, spinner loops and toggle knobs. Our directories have about 1,800 of those as copy-paste HTML and CSS with no JavaScript: Hover Effects, Loaders, Toggle Switches, Buttons and more. Every snippet has a prefers-reduced-motion guard and two custom properties for color and size.
The Spotlight Card Hover below is one of them. Swap it in for a motion.div and the component no longer needs to ship animation JavaScript for that effect.
Watch out for: These are CSS state and loop effects. They do not replace layout animation, drag gestures or shared element transitions; keep Motion, GSAP Flip or ViewTransition for those.
12. Motions for Claude Code: Best for letting Claude Code drop real animation code into your repo
Platform: Motions Pro plan; works inside Claude Code Ours
npm test
Running 42 tests
42 passed, 0 failed
If you are replacing Motion across a codebase, the slow part is rewriting each component. Motions for Claude Code connects Claude Code to the whole catalog, so it can search the snippets and motion prompts and paste the real code into your project instead of improvising keyframes from memory. Ask it to swap a component's motion.div hover for a CSS effect and it looks one up, adapts the class names and wires it in.
The Agent Tool Call Card below is from the catalog it searches.
Watch out for: It only finds what is in our catalog, which is CSS and motion prompts, not GSAP timelines or Motion components. Review every diff it makes, as you would any agent's.
How to choose a Framer Motion alternative
Match it to your framework
React web apps can choose from everything here; React 19.3 and later should try ViewTransition before adding a library. React Native means Reanimated. Svelte and Vue should start with their built-in transitions. Vanilla, Astro or multi-framework sites are where GSAP, Anime.js and Motion's own vanilla API shine.
Match it to the kind of motion
Hover, focus, toggles and popovers belong in CSS. Lists that add and remove items fit AutoAnimate. Interruptible, gesture-driven motion fits React Spring or Reanimated. Long sequences and pinned scroll stories fit GSAP. Layout and shared element animation is where Motion is still strongest, with GSAP Flip and ViewTransition as the real alternatives.
Match it to your budget
Count what you ship. If 90 percent of your motion is CSS-able, move that 90 percent to CSS and keep a small library for the rest. Our best CSS animation libraries guide covers the lightweight end, and CSS vs GSAP goes deeper on where JavaScript earns its place.
Audit one component tonight
Pick the component with the most motion props and list what each one does. Hover lifts and fades become CSS. List churn becomes AutoAnimate. Route changes become ViewTransition. Whatever is left is the honest case for keeping Motion or moving to GSAP.
For the CSS half, start from a snippet in the directory or describe the effect and let the creator write it.
Replace this Framer Motion card hover with pure CSS: on hover the card lifts 4px and its shadow deepens over 200ms with an ease-out curve, and on press it scales to 0.98 in 100ms. Add a mount animation with @starting-style: fade and rise 8px over 300ms. Use custom properties for the accent color and lift distance. Under prefers-reduced-motion, keep the shadow change and drop all movement.
Common questions
Is Framer Motion the same as Motion?
Yes. The library formerly called Framer Motion is now Motion, installed as the motion package and imported from motion/react. It also runs in vanilla JavaScript and Vue.
Is Framer Motion still free?
The Motion library is free and open source. Motion+, with premium examples, Motion UI components and the Motion Studio editor, is a separate paid product sold per developer.
Is GSAP better than Framer Motion?
For timelines, scroll scenes and SVG work, GSAP is stronger, and it is now free including every plugin. For declarative React animation with layout and exit animations tied to component state, Motion is more natural. Many teams use CSS for most motion and one of the two for the rest.
What is the lightest alternative to Framer Motion?
CSS, which adds nothing to your bundle. Among libraries, AutoAnimate is tiny and Motion's own mini animate function starts at 3.2 kB. Our snippet directories give you copy-paste CSS versions of common effects.
Can I replace Framer Motion with the View Transition API?
For route changes and elements moving between states, often yes, especially with React 19.3's stable ViewTransition component. It does not do gestures, drag or springs, and it only animates updates made inside a Transition.