Animation libraries for websites in 2026: what to take and at what stage

## How to choose: three questions before installation

Before looking at specific libraries, answer three questions:

Who makes animation? If a designer needs Rive or LottieFiles with a visual editor. If a developer or AI is writing code, Motion, GSAP, or TailwindCSS Motion.

How complex is interactivity? Simple fade when an element appears - CSS or TailwindCSS Motion. The button with three states and transitions between them is Rive. Scrolling timeline with pinning - GSAP ScrollTrigger.

How important is performance? Heavy libraries on mobile traffic are killing Core Web Vitals. GSAP weighs ~68 KB of miniaturized JS, Motion when using LazyMotion - from ~18 KB, TailwindCSS Motion - ~0 KB JS (pure CSS).

## Free libraries

### Motion (formerly Framer Motion)

The most popular animation library for React: 30.7k stars on GitHub, 3.6 million downloads per week. At the end of 2024, Framer Motion was renamed Motion and added native support for Vue. Used by Figma, Framer, Vercel.

** When to take.** React-project with microinteractions, transitions between screens, gestures, scroll-animations. If AI generates code for a React site, Motion will be the default choice.

** How do I connect:**

npm install framer-motion

Minimum example of an animated appearance:

import { motion } from "motion/react"

export default function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
    >
      Контент
    </motion.div>
  )
}

Limitation. For simple animations, redundant. Basic import { motion } adds ~30 KB to the bundle. Use LazyMotion to load only the desired features.

Prompt for Codex/Claude Code:

Install framer-motion. Wrap all the cards on /app/page.tsx
in motion.div with a bottom-up animation: opacity 0→1, y 24→0, duration 0.4s.
Add staggerChildren 0.08s so the cards appear in turn.
Use LazyMotion + domAnimation to avoid bloating.

Price. Free, MIT.

### GSAP (GreenSock Animation Platform)

What it is. Professional standard for complex animations: scroll effects, timelines, SVG animation, particle systems. 23.6k stars, 1.47 million downloads per week.

Important fact: in April 2025, Webflow bought GreenSock and made GSAP completely free including commercial use** – all plugins that used to cost $199–$1999 per year (SplitText, MorphSVG, DrawSVG, ScrollTrigger, ScrollSmoother) are now available without a license.

When to take. A site with parallax effects, pin sections when scrolling, animated SVG illustrations, reveal effects when text appears. Awwwards-level without paid plugins.

** How do I connect:**

npm install gsap

Example ScrollTrigger - text appears when scrolling:

import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)

gsap.from(".hero-title", {
  opacity: 0,
  y: 60,
  duration: 1,
  scrollTrigger: {
    trigger: ".hero-title",
    start: "top 80%",
  }
})

Important for React. Always use useGSAP() hook instead of useEffect - automatically clears animations when unmounting the component.

Limitation. The only prohibition in the license is that you cannot build a visual animation editor that competes with Webflow. For everything else, free.

Prompt for Codex/Claude Code:

Install the gsap. On /app/about/page.tsx, make a section with text and image.
Add ScrollTrigger: the title appears from the bottom when it reaches 80% of the viewport.
The image is on the opposite side with a small parallax (y: -30 in scroll).
Use the useGSAP() hook to automatically clean when unmounting.

Price. Free of charge from April 2025.

### TailwindCSS Motion

** What is it.** CSS-utilities for animation in Tailwind projects. Zero JavaScript — everything through classes in markup. It is growing rapidly: from 3k stars in early 2026 to 12k+ by June.

** When to take.** Tailwind-project where you need simple animations: the appearance of elements, hover effects, pulsation, rotation. Especially good in conjunction with AI – Cursor and Claude Code perfectly generate Tailwind Motion classes.

** How do I connect:**

npm install tailwindcss-motion

IN tailwind.config.js:

plugins: [require('tailwindcss-motion')]

For example, the card appears at the bottom:

<div class="motion-preset-slide-up motion-duration-500">
  Карточка
</div>

No physics, no gestures, no timeline. CSS animation alone means there is no subtle control over sequences.

Prompt for Codex/Claude Code:

Install tailwindcs-motion and connect the plugin to tailwind. config.js.
On the main page add animation:
Motion-preset-fade-down motion-duration-700
- subtitle: same, but with motion-delay-200
CTA button: motion-preset-bounce at hover
Don’t use JS – only Tailwind classes.

Price. Free, MIT.

### Anime.js

What is it. Lightweight (~14 KB) JavaScript engine without dependencies. It works well with CSS properties, SVG, DOM attributes. 66k stars – more than Motion and GSAP combined.

The project is not on React (Vue, Vanilla JS, Astro), you need a simple animation of a specific element, you want a minimum weight.

npm install animejs

An example is the animated appearance of the list:

import anime from "animejs"

anime({
  targets: ".list-item",
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: "easeOutExpo",
  duration: 600,
})

Prompt for Codex/Claude Code:

Set up animejs. On /src/pages/index.astro when downloading
Animate the appearance of elements of the .feature-item list:
opacity 0→1, translateY 20→0, stagger 80ms between elements
easing easeOutExpo. Run animation through IntersectionObserver
when the section enters the visible area.

Limitation. No native support for scroll animations (need workarounds), no physics, fewer ready-made patterns for React.

Price. Free, MIT.

### React Spring

**Spring physics instead of CSS-easing. Animations look more organic when dragging and gestures. 29k stars, 788k downloads per week.

** When to take.** Drag-and-drop, cards that bounce, data in the form of diagrams with animated change.

npm install @react-spring/web

Prompt for Codex/Claude Code:

Set @react-spring/web. Make the DraggableCard component:
The card can be dragged, when released it is springy.
It's coming back. UseDrag from @use-gesture/react
and useSpring for x/y coordinate animation with config: { tension: 300, friction: 20 }.

Limitation. A larger bundle than Motion is more difficult for AI generation (non-standard API).

Price. Free, MIT.

## Tools with visual editor

### Rive

What it is. Design tool + runtime for interactive animation. The designer draws and animates in the browser, the developer connects the .riv file. Used in Spotify Wrapped, Duolingo, products with 2 billion users.

The key feature is State Machine: animation is controlled by states and conditions, not a linear timeline. Button with hover, pressed, disabled – without a single line of animation logic code.

** When to take.** Animated icons with states, onboarding illustrations with interactivity, game-like UI elements, hero-sections with cursor reaction.

How to connect to React:

npm install @rive-app/react-canvas

import { useRive } from "@rive-app/react-canvas"

export default function AnimatedButton() {
  const { RiveComponent } = useRive({
    src: "button.riv",
    stateMachines: "ButtonSM",
    autoplay: true,
  })
  return <RiveComponent style={{ width: 200, height: 60 }} />
}

Price. Free for personal projects (3 shared files) Cadet – $9/month (unlimited files + export) Voyager is $32/month.

Prompt for Codex/Claude Code:

Set @rive-app/react-canvas. Create a RiveHero component that downloads
The file is /public/hero.riv and connects the State Machine with the name "HeroSM".
Add handler: when hovering the cursor on the component, trigger the Boolean
Input "isHovered" in State Machine via useState MachineInput.
Component size – 100% container width, keep proportions.

### LottieFiles

What it is. Platform for ready-made Lottie animations + visual editor. Lottie - JSON format developed by Airbnb: vector animations from After Effects, light weight, work everywhere. The LottieFiles library contains 800,000+ animations.

In 2026, AI features were added: Motion Copilot, Prompt to Vector, Prompt to State Machines. Figma plugin allows you to export prototype interactions directly to .dotLottie.

When to take. You need ready-made animation quickly (download, success-state, blank list), there is no motion designer in the team, you need cross-platform animation (web + iOS + Android in one file).

** How do I connect:**

npm install @lottiefiles/react-lottie-player

import { Player } from "@lottiefiles/react-lottie-player"

export default function LoadingState() {
  return (
    <Player
      autoplay
      loop
      src="https://assets.lottiefiles.com/loading.json"
      style={{ height: 120, width: 120 }}
    />
  )
}

Limitation. Lottie - linear animations, not interactive states. You need Rive for interactivity. The free version of the library is limited, premium animations require a subscription.

Prompt for Codex/Claude Code:

Install @lottiefiles/react-lottie-player. Create three components:
LoadingSpinner (loop: true), SuccessCheck (loop: false, autoplay: false - false)
EmptyState (loop: true) and EmptyState (loop: true).
The animation files are in /public/lottie/. All three components must be accepted.
Size: Number Props for Size Control. Do not use built-in control.

Price. Free access to part of the library. Individual subscription - $19.99 / month (annual payment). Team - $24.99/user/month.

## How to choose: a quick cheat sheet

Tailwind project, simple transitions
TailwindCSS Motion (free, zero JS)

React project, micro-interactions and gestures
Motion (free of charge)

Scrolling effects, timelines, SVG animations
GSAP + ScrollTrigger (free in full)

Animated icons and components with states
Rive (free for personal projects)

You need an animation right now (loader, success)
LottieFiles (free part of the library)

Vue/Vanilla JS, minimum weight
Anime.js (free)

Drag-and-drop with bounce physics
React Spring (free of charge)

## About Kombai

Kombai is not an animation library, but a tool for generating code from Figma layouts. It is able to convert static components into React/HTML/CSS code, but there is no animation in its area of responsibility. It is more correct to perceive it as part of a handoff workflow, rather than as a source of motion decisions.

## The Three Mistakes AI Makes Most Often

Cursor and Claude Code know the syntax of libraries well. But there are three patterns that they reproduce incorrectly – and that’s not noticeable until you open DevTools or launch Lighthouse.

** Animates top/left instead of transform.** Animation via top: 0 → top: 100px causes layout reflow on each frame - the browser recalculates the position of all elements. transform: translateY(100px) does the same visually, but runs on a GPU and does not touch layout. The difference in performance is many times, especially on mobile. If you see an animation in the generated code through top, left, width, height, replace it with transform.

Forgets about prefers-reduced-motion. Some users turn off animations in the system settings - due to vestibular disorders, epilepsy or just preferences. AI agents rarely add this verification themselves. The minimum option to add to each project with animations:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

In GSAP, this is closed with one line: gsap.matchMedia() with the condition (prefers-reduced-motion: reduce). In Motion - reduceMotion: "user" props at the MotionConfig level.

Too many simultaneous animations. AI willingly adds animation to every element of the page. Eight cards with different stagger, plus header, plus background parallax - the browser begins to drop frames. Rule: no more than 3-4 simultaneously active animations on the screen. The rest are run only when the item enters the viewport via IntersectionObserver or ScrollTrigger.

## How Libraries Work Together

Real projects rarely use a single library – often it is a combination for different tasks on the same site.

*TailwindCSS Motion + GSAP is the most common pair for Next.js. TailwindCSS Motion covers basic appearances and hover effects without JS. GSAP connects only where scroll timeline or SVG animation is needed. Bottom line: Minimum JS for simple, full power for complex.

Motion + Rive is a bundle for product interfaces. Motion manages transitions between screens, layout animations, and microinteractions in code. Rive is for complex icons and illustrations that the designer has created with states. Every tool does what it is designed for.

LottieFiles + any code library - LottieFiles does not compete with Motion or GSAP, it complements them. Lottie file for loading spinner and success animation, Motion or TailwindCSS Motion for everything else.

## What AI Generates Best

Cursor, Claude Code and v0 do well with Motion and GSAP – the syntax of these libraries is widely represented in training data. TailwindCSS Motion is generated accurately and predictably. Rive and Lottie are just a random connection, the animation file itself still needs to be created by hand or received from the designer.

Practical conclusion: for sites that are built through AI-workflow, the bundle TailwindCSS Motion + GSAP covers 90% of tasks without a single paid tool.

## Checklist before deplot

● All animations use transform/opacity, not top/left/width/height
• Added prefers-reduced-motion via CSS, MotionConfig or gsap.matchMedia()
Checked out by Lighthouse on mobile: CLS didn't grow due to appearance animations
● Animations outside the viewport do not run before scrolling to them
● No more than 3-4 simultaneous animations per screen
Lottie/Rive files load lazy, do not block the first render
● In React: GSAP uses useGSAP(), not useEffect; animations are cleared when unmount