Motion design for websites in 2026: the complete guide with Claude Code (GSAP, Motion, Rive, and performance)

Good motion in 2026 never calls attention to itself. It guides reading, explains state changes, and paces the scroll without seizing the browser.

The problem now is no missing library. It is too many options with no selection rule. CSS scroll-driven for the base, GSAP for scroll with pinning, Motion for micro-interactions in React, Lenis for smooth scroll, Rive for stateful interaction, Lottie for plain loops. Without a decision rule, the project piles up scripts, breaks accessibility, and loses fluidity.

This guide organizes that map. You leave with a decision table per job, a working rule between CSS and GSAP, a Claude Code setup that generates reviewable code, readings of awarded cases, and the performance and accessibility limits that decide what stays live.

Motion became a functional layer of the interface in 2026. It signals hierarchy, confirms actions, and holds context across transitions instead of decorating.

That shift shows in community talk. On Aug 31, 2026, a Hacker News quiz proposed guessing AI models from web design alone. The same day, another thread revisited styles associated with 1993. Nostalgia was never the point. Pattern reading was. When every site ships the same generic hero with the same generic fade, visitors sense repetition before they sense intent.

Awarded sites answered the other way. Instead of more animation, they applied animation with motive. Scroll that reveals in layers, plain physics answering the cursor, ASCII turned texture, cards reacting to hover on purpose. Movement serves reading, never competes with it.

From special effect to wayfinding system

Decorative motion and functional motion differ in which question they answer. Functional motion answers where am I, what changed, and where next. Scrubbed scroll shows progress. An exit transition explains that an element left the scene. Pinning holds context while content advances. A micro-interaction confirms the click landed.

Motion that answers none of those turns into cost. JS cost, maintenance cost, and cognitive cost for whoever reads.

What this guide covers and what stays with the satellites

This pillar delivers the map and the decision rule. The satellite guides go deep on each flow with code, prompts, and audits. The logic runs plain. Decide here, build in the satellite, audit before publishing.

Each library wins one main job. The right pick shrinks the bundle, simplifies maintenance, and keeps the Claude Code prompt direct.

The table below compresses library, main job, known weight or cost, and when to use it. The numbers carry source and date. The rest stays qualitative, no guessing.

GSAP for cinematic scroll

GSAP stays the reference for narrative scroll because it separates timeline, trigger, and sync cleanly. The relevant context shift is commercial and hands-on. After Webflow bought GreenSock in Oct 2024, distribution went 100% free on Apr 30, 2025. The version is v3.15.0, averaging 4.6M npm downloads a week and present on 11M+ sites, per gsap.com, npm, noqode.fr from May 13, 2026, and artofstyleframe from May 25, 2026.

In practice that removes license friction from the call. The criterion turns technical. With pins, scrubs, layered parallax, or scroll-to-timeline sync, GSAP with ScrollTrigger is the direct road. Claude Code writes that code well given section structure, pin names, and expected mobile behavior.

Motion for micro-interactions in React

Motion does the work GSAP should never do inside a React app. Animated layout, exit transitions, and gestures belong to the component cycle. Generation v13 marks the post-Framer Motion phase, importing from motion/react and averaging 42M npm downloads a week. Core features like layout, AnimatePresence, and animateView run free, plus Motion UI from Jul 2026, per motion.dev and npm. The ecosystem adds a search MCP named search-motion-codex and a Cursor partnership cited in its docs.

The payoff shows on screens with lists, filters, modals, and navigation. AnimatePresence explains exits, layout explains reorders, gestures explain touch and cursor response. Ask Claude Code for small components with clear enter, exit, and hover states instead of one giant animation file.

micro-interactions with Motion

Rive and Lottie for interactive vectors

Rive and Lottie never compete for the same job. Rive does interaction with states. Lottie does plain playback. The state-machine distinction explains adoption in products with continuous interaction, like Spotify Wrapped and Duolingo, with a cited 2B-user base, per youngju.dev, snigdha, and wikivibe from Jun 12, 2026. For plain loops, dotLottie stays relevant because it cuts 60 to 90% against JSON, per the same sources.

The Razorpay Sprint26 case shows Rive's ceiling in marketing. The page combined 100+ Rive triggers with Three.js and earned a highlight on Aug 31, 2026 at Awwwards. Repeating the scale misses the point. Noticing the pattern is the point. Triggers spread across the page turn scroll into an interactive panel instead of a static showroom.

Rive vs Lottie with Claude Code

Use CSS for the base, GSAP for sync. That sentence compresses the 80/20 rule organizing scroll in 2026.

CSS scroll-driven covers reveals, progress fades, and plain parallax with roughly 87% desktop and 71% mobile support by mid-2026, no pinning, per artofstyleframe from May 25, 2026. The 80/20 rule from the same analysis says most scroll can stay in CSS, while GSAP takes pinning, fine scrub, and cross-layer coordination.

That split sharpens the prompt. Asking everything in GSAP writes JS where CSS sufficed. Asking everything in CSS breeds hacks where GSAP solved it with a timeline and a pin.

The 80/20 rule in practice

Open each section with three questions. Is a pin holding content while the rest advances. Is a scrub tying scroll progress to a timeline. Is parallax at distinct speeds demanding per-pixel sync. Three no answers mean CSS. One yes already justifies planning GSAP with ScrollTrigger, container names, and mobile behavior set before generating code.

That triage cuts rework with Claude Code. The model never guesses architecture. You state which sections run CSS and which run GSAP, with container names and mobile behavior.

Syncing Lenis with ScrollTrigger

Lenis owns scroll feel. ScrollTrigger owns scroll-tied narrative. The bridge between them runs short and known. The lenis.on(scroll, ScrollTrigger.update) pattern holds positions in sync, per youngju.dev from May 16, 2026, adamarant from May 28, 2026, and snigdha from Jun 18, 2026. Without that bridge, animations fire early and pins compute wrong positions.

ScrollSmoother solves the same theme another way. It lives native to GSAP, with parallax through attributes like data-speed and data-lag, per gsap.com/docs and annnimate. Lenis works at window level with no wrapper demanded. The call runs through stack and control. For GSAP-heavy pages with declarative parallax, ScrollSmoother simplifies. For agnostic smooth scroll with one-off integration, Lenis weighs about 3KB and does the job.

cinematic scroll with GSAP and Lenis

Skills set the standard, MCPs bring docs and audits, prompts hold review. That trio separates deciding from building and prevents code nobody can maintain.

The most direct start is the iart-ai/web-animation-skills repo on GitHub. It gathers 9 skills focused on web animation: gsap-web, 60fps-animation, page-transition-animation, accessible-animation, micro-interaction, glassmorphism, svg-animation, lottie-animation, and ascii-animation. Install with npx skills add or the marketplace (iart-ai repo). The repo carries prompt examples for GSAP heroes, the 60fps pattern, page transitions, accessible variants, micro-interactions, SVG, Lottie, and ASCII.

That set works because each skill carries one pattern. The GSAP skill pulls timelines and ScrollTrigger. The 60fps skill pulls transform and opacity. The accessible skill pulls reduced-motion preference. Claude Code stops improvising and follows a guide.

MCPs, toolkit, and the React skill completing the flow

For living GSAP docs, dedicated MCPs exist. The scoped @vinhnguyen/gsap-mcp package and the bl00dclot implementation with 18 tools show on npm as bridges between the model and the docs. Use them to verify ScrollTrigger and ScrollSmoother APIs before generating complex timelines.

The toolkit tied to wilwaldon organizes the rest of the flow. It combines Anthropic's official frontend-design, the freshtechbro collection with 23 skills, the jezweb skill for Motion, Playwright MCP for in-browser audits, Chrome DevTools MCP for performance, Context7 for docs, and Figma MCP for layout handoff. Each piece has a job. Design sets the standard, Motion sets React interaction, Playwright and Chrome DevTools verify, Context7 refreshes docs, Figma preserves visual intent.

In React, add the gsap-react skill with the useGSAP pattern cited on skillsplayground. It teaches the right hook for mounting and cleaning timelines inside the component cycle, which stops scroll-listener leaks.

A review flow before publishing

One plain flow fits nearly every project. First, state in the prompt which sections run CSS and which run GSAP, with ID names and mobile behavior. Then ask for files split by responsibility, with easing and duration tokens centralized. Finally, run an in-browser audit with Playwright MCP and check timelines, CLS, and prefers-reduced-motion response.

That closing matters because motion breaks in details. A pin with no reserved space shifts layout. Scroll with no sync fires early. A transition with no exit confuses. Audits catch those mistakes before visitors do.

The period's SOTDs reward clear direction, not effect volume. Each case below uses a distinct stack for a readable reason.

Oryzo AI, SOTD on Apr 13, 2026 by the Lusion studio, pairs GSAP with Three.js to turn an AI product into a layered narrative. Scroll leads, 3D illustrates, text anchors. Waabi, designed by Antinomy in React with Motion and Next.js, shows the other extreme. Precise micro-interactions in a technical interface, never weighing down reading. Studio K95, with GSAP, Three, and Nuxt, runs the same logic in a portfolio. Layered entrances, rhythmic scroll, type that answers.

Made With GSAP, also a SOTD, works as a living catalog of what the lib does well. Hover cards, a hero with drag and text bursts show physics and cursor response with no video involved. Aino.agency, a SOTD with ASCII and physics in vanilla at a 30kb total page, proves constraint breeds identity. Little JS, much direction. Oimachi, SOTD from Aug 21, 2026, and Magnetism, SOTD from Aug 20, 2026, both with GSAP, close the arc with editorial scroll and layers that respect reading.

Codrops Telescope, from Oct 2025, with ScrollSmoother and ScrollTrigger, anticipates the current rule. Smooth scroll with a native wrapper, per-section triggers, declarative parallax. It is the case to study when the doubt is Lenis versus ScrollSmoother.

Patterns repeating across winners

Three patterns show up nearly everywhere. First, scroll with hierarchy. One idea per viewport, with reveals honoring reading order. Second, instant gesture response. Hover, drag, and cursor with direct feedback, no lag. Third, texture at low cost. ASCII, subtle noise, and plain physics sign work without heavy video.

None of those patterns demands an exotic stack. They demand decisions about what animates, when it animates, and why it animates.

The 2026 SOTD pattern is no longer animation, it is restraint with motive. Aino.agency at 30kb of JS and Razorpay Sprint26 past 100 triggers won for the same reason in opposite doses: every move answers a visitor question.

Motion that seizes scroll, shifts layout, or ignores user preference should never publish. Performance and accessibility read as acceptance criteria, not final polish.

The performance base holds steady. Animating transform and opacity avoids reflow, short timelines cut jank, reserving pin space prevents shifts, and auditing with Playwright MCP and Chrome DevTools MCP surfaces regressions before deploy. Context7 helps verify current APIs, Figma MCP preserves approved layout measures. That chain turns taste into verification.

Accessibility holds the same bar. Every meaningful animation needs a legible static equivalent under prefers-reduced-motion, with no content lost. Automatic transitions need controls, visible focus must never vanish mid-animation, and essential content cannot depend on hover. The accessible skill in the iart-ai set plus in-browser checks cover that list with no improvising.

performant 60fps motion and accessibility

When to cut motion instead of optimizing

Some animations deserve no optimization. They deserve removal. Long intros delaying reading, parallax fighting text, loops distracting from forms, and transitions hiding action feedback make that list. The criterion runs direct. If motion delays chores, confuses state, or spends attention explaining nothing, cut it and measure reading again.

Is GSAP still worth it now that distribution is free?

It is, for scroll with pinning, scrub, and cross-layer sync. Distribution runs 100% free since Apr 30, 2025, after Webflow bought GreenSock in Oct 2024. That means v3.15.0, 4.6M average npm downloads a week, and 11M+ sites, per gsap.com, npm, noqode.fr from May 13, 2026, and artofstyleframe from May 25, 2026. License cost leaves the math. For plain reveals, prefer CSS scroll-driven and save GSAP for timeline work.

Does Motion replace GSAP in React projects?

Not as a rule. Motion owns micro-interactions, layout, gestures, and AnimatePresence inside the component cycle. That means imports from motion/react in generation v13, 42M average npm downloads a week, and free core features, plus Motion UI from Jul 2026, per motion.dev and npm. GSAP owns narrative scroll and pinning. In many React projects the two coexist behind a clear border.

Rive or Lottie for vector animation on the site?

Rive for stateful interaction and triggers, Lottie for plain loops. The state-machine base carries adoption in Spotify Wrapped and Duolingo, with a cited 2B-user base. That sustains Rive for interaction. And dotLottie cutting 60 to 90% against JSON sustains Lottie for light loops, per youngju.dev, snigdha, and wikivibe from Jun 12, 2026. The Razorpay Sprint26 case, past 100 Rive triggers with Three.js and highlighted Aug 31, 2026 at Awwwards, shows Rive's interactive ceiling.

How do I ask Claude Code for motion without shipping a heavy page?

Split deciding, generating, and auditing. State in the prompt what stays in CSS scroll-driven and what goes to GSAP, Motion, Lenis, Rive, or Lottie. Use the 9 skills in the iart-ai/web-animation-skills set installed by npx skills add or marketplace, back docs with MCPs like @vinhnguyen/gsap-mcp and bl00dclot with 18 tools, and audit with Playwright MCP and Chrome DevTools MCP, per GitHub iart-ai and npm. The toolkit with Anthropic's official frontend-design, freshtechbro at 23 skills, jezweb Motion, Context7, and Figma MCP organizes that flow end to end.

Motion in 2026 rewards clarity. CSS scroll-driven settles the base with roughly 87% desktop and 71% mobile support by mid-2026, per artofstyleframe from May 25, 2026. GSAP owns pin and scrub. Motion owns React interaction. Lenis owns smooth at about 3KB with known sync. Rive owns states, Lottie owns loops with lighter dotLottie. The Claude Code setup ties it together with skills, MCPs, and in-browser audits.

Use this pillar as a hub. For narrative scroll, go deep on the GSAP and Lenis flow. For component response, go deep on Motion micro-interactions. For vectors with logic, go deep on Rive versus Lottie. For shipping without jank, go deep on performance and accessibility. Decide here, build in the satellite guide, audit before publishing.

• GSAP official site (free distribution and plugins, 2026)
• Noqode on free GSAP (Webflow, free plugins, commercial use, May 13, 2026)
• Artofstyleframe on scroll and motion (license, SplitText 3.13, and the 80/20 CSS-vs-GSAP rule, May 25, 2026)
• Motion docs and Motion on npm (v13, motion/react, 42M downloads/week)
• YoungJu Dev on web animation (library landscape, May 16, 2026)
• Adamarant on Lenis and GSAP (lean stack and reduced-motion, May 28, 2026)
• Snigdha on animation libs (React/Next.js table with Lenis, Rive, and dotLottie, Jun 18, 2026)
• Wikivibe on Rive and Lottie (state machines, 2B users, Jun 12, 2026)
• Awwwards, animation picks (Oryzo AI, Waabi, Studio K95, Made With GSAP, Oimachi, Magnetism cases)
• Awwwards, Razorpay Sprint26 (100+ Rive triggers with Three.js, highlighted Aug 31, 2026)
• Codrops, layered zoom with ScrollSmoother (Telescope recreation, Oct 2025)
• Annnimate on ScrollSmoother (data-speed, data-lag, and the call against Lenis)
• iart-ai web-animation-skills on GitHub (9 skills, install, example prompts)
• Frontend toolkit for Claude Code (official frontend-design, freshtechbro 23 skills, Playwright and DevTools MCPs)
• vinhnguyen GSAP MCP on npm (intent analysis and React/Next.js setup)
• bl00dclot GSAP MCP on GitHub (18 static tools, no runtime)
• Skillsplayground on gsap-react (useGSAP hook with cleanup)
• Quiz: guess the AI by its web design and 1993 web styles (Hacker News, Aug 31, 2026)