AI Website Animations: Motion, GSAP and Claude Without Lag

Why does Claude make everything fade up on scroll?

Ask an AI model for a modern landing page and you usually get the same choreography: every section slides up and fades in on scroll, every card lifts on hover, and the hero headline staggers in word by word. It is the average of thousands of templates, so models reach for it when nobody says otherwise. Anthropic's published frontend-design skill says it plainly: use non-user-triggered motion sparingly and deliberately, only to draw attention, because the fade-and-slide-up default reads as AI-generated. The result feels busy rather than crafted, and often costs performance too.

• •Uniformity: the same entrance on every block flattens hierarchy, so nothing feels important.
• •Hidden heroes: a headline that starts at opacity 0 is not counted as contentful by Chromium until it appears, which can push back your LCP.
• •Wrong properties: animating width, margin or top triggers layout on every frame instead of staying on the compositor.

How do you build a motion system before prompting Claude?

Treat motion like colour and type: a few tokens with rules, kept in the same CLAUDE.md or rules file as your design tokens (see our post on design tokens and CLAUDE.md rules). Nielsen Norman Group's guidance on animation duration puts most UI animation in the 100 to 500 ms range, with simple feedback such as toggles around 100 ms and a warning that at 500 ms animations start to feel like a drag. Emil Kowalski, who writes about interaction design, recommends keeping UI animations under 300 ms. Material Design 3 publishes concrete tokens you can borrow, such as a standard easing of cubic-bezier(0.2, 0, 0, 1) and an emphasized decelerate curve of cubic-bezier(0.05, 0.7, 0.1, 1).

How do you prompt Claude for purposeful motion?

The fix is to replace open-ended requests such as add some nice animations with a brief that names the system, the one moment and the constraints. Put the standing rules in your project instructions so every session inherits them, then use per-task prompts for the signature interaction. These are adapted from the rules file we keep in client repos and work in most coding assistants. Pair them with the screenshot loop from our visual feedback post so Claude checks the result rather than guessing.

• •Rules file block: Motion tokens are --dur-fast 120ms, --dur-base 220ms, --dur-slow 400ms, --ease-out cubic-bezier(0.2,0,0,1). Animate only transform and opacity. No scroll-triggered entrance animations unless I ask for one by name. Every animation must have a prefers-reduced-motion fallback. Never animate above-the-fold text from opacity 0.
• •Signature prompt: Build one signature interaction for the product grid. When a card is clicked, the image should expand into the detail panel as a shared-element transition using Motion layoutId. Duration --dur-slow, easing --ease-out. Nothing else on the page should move. Explain which properties animate.
• •Audit prompt: List every animation and transition in this codebase in a table with file, trigger, properties animated, duration and whether it has a reduced-motion fallback. Flag anything animating layout properties or running on every scroll.
• •Subtraction prompt: Remove all entrance animations from sections below the hero. Keep hover feedback only on interactive elements, at --dur-fast. Show me the diff.

Motion, formerly Framer Motion: what changed and when should you use it?

Framer Motion is now Motion. The documentation at motion.dev describes Motion for React as previously Framer Motion, the package you install is motion, and React components are imported from motion/react. The project is MIT licensed on GitHub. Motion is the natural choice when animation is tied to React state: things mounting and unmounting, layout changes, gestures and shared-element transitions. Its layout prop measures the change and animates with CSS transform, translate plus scale, rather than animating width and height, which is exactly the property discipline Core Web Vitals reward. Bundle size is manageable: Motion's docs quote about 34kb for the full motion component but just under 4.6kb for the initial render using the m component with LazyMotion, loading feature sets later.

• •Install with npm install motion and import motion or m from motion/react; tell Claude this explicitly, because older training data often reaches for the framer-motion package name.
• •Use AnimatePresence for exit animations and layoutId for shared elements; these are the features CSS alone handles worst.
• •Wrap the app in MotionConfig with reducedMotion set to user, and Motion will disable transform and layout animations for visitors who ask for reduced motion while keeping opacity and colour changes.

Is GSAP free now, and when is it the right tool?

Yes. GSAP's pricing page states that GSAP is now 100% free for all users thanks to Webflow's support, and that includes the plugins that used to be paid, such as SplitText and MorphSVG, alongside ScrollTrigger. Commercial use is covered by the standard no-charge licence, with one notable restriction: you may not use it to build a product that competes with Webflow's visual animation builder. GSAP shines when motion is choreography rather than state: multi-step timelines, scroll-scrubbed storytelling, pinned sections, SVG morphing and text splitting. ScrollTrigger calculates positions up front rather than watching every element, and scrub links timeline progress to the scrollbar.

• •In React, use the useGSAP hook from @gsap/react; it replaces useEffect or useLayoutEffect and reverts animations, ScrollTriggers, Draggables and SplitText instances on unmount, which prevents duplicated animations in Strict Mode.
• •Use gsap.matchMedia with a reduceMotion condition of (prefers-reduced-motion: reduce); animations created inside it revert automatically when the condition stops matching.

What can CSS scroll-driven animations and View Transitions do without JavaScript?

Two platform features now cover much of what used to need a library. CSS scroll-driven animations link a normal keyframe animation to a scroll or view timeline through animation-timeline with the scroll() and view() functions, plus animation-range to set where it starts and ends; Bramus, a Chrome developer relations engineer, maintains a demo site at scroll-driven-animations.style showing them running off the main thread. View Transitions animate between DOM states: document.startViewTransition() for single-page apps, and an @view-transition rule with navigation set to auto, opted into on both pages, for cross-document transitions in multi-page sites. Support is uneven, so check the Baseline status before you ship. Per the web-features data we checked on 1 October 2026, the figures below apply. Treat both as progressive enhancement: wrap them in @supports and make sure the page is complete without them.

CSS vs Motion vs GSAP: which should Claude use?

Most sites need more than one, and the cleanest rule to give Claude is a ladder: try CSS first, reach for Motion when the animation depends on React state or layout, and reach for GSAP when you need a timeline or scroll choreography. The table uses only facts published by each project; measure bundle impact in your own build.

Do animations affect Core Web Vitals?

They can affect all three, and AI-generated motion tends to hit them in predictable ways. Google's thresholds, published on web.dev, are an LCP of 2.5 seconds or less, an INP of 200 ms or less and a CLS of 0.1 or less at the 75th percentile. INP replaced First Input Delay as a Core Web Vital on 12 March 2024 and measures from the start of an interaction until the browser next paints a frame, so heavy JavaScript animation work that runs on click shows up directly. web.dev's animation guide recommends restricting animations to opacity and transform so they stay on the compositor, and its CLS guidance says to use transform: scale() instead of changing height and width, and transform: translate() instead of top, right, bottom or left. Matt Perry's tier list on the Motion blog adds filter and clip-path to the compositor-friendly group and warns that changing CSS variables always triggers paint.

• •LCP: never start the hero headline or hero image at opacity 0. Chromium excludes opacity 0 elements from LCP, so a fade-in delays the moment your largest element counts.
• •CLS: layout shifts within 500 ms of user input are excluded, but entrance animations that change size or position on load and on scroll are not. Animate transforms, reserve space, and never animate height to reveal content on load.
• •INP: keep click handlers light. Start the visual change immediately with a transform or class toggle, and defer measuring, data fetching or heavy timelines.

How do you respect prefers-reduced-motion in AI-built sites?

The prefers-reduced-motion media query exposes the operating-system setting with two values, no-preference and reduce, and has been supported across major browsers for years. WCAG 2.2 success criterion 2.3.3, Animation from Interactions, is level AAA, but its reasoning applies to everyone: motion triggered by interaction can cause nausea, migraines and dizziness for people with vestibular disorders, and parallax is its named example of non-essential motion. Josh W. Comeau recommends a no-motion-first approach in which animations are added inside a no-preference media query, so browsers or users without the preference get the calm version by default. In practice, give Claude one global rule and one library rule: in CSS, put transitions inside @media (prefers-reduced-motion: no-preference); in Motion, set MotionConfig reducedMotion to user; in GSAP, build animations inside gsap.matchMedia with a reduceMotion condition. Then test it with Chrome DevTools or Playwright emulating the setting.

What are the most common AI over-animation mistakes?

These are the patterns we see most often when reviewing sites generated with Claude, ChatGPT, Gemini, v0 or Lovable, and each has a one-line fix you can hand back to the model.

What should you check before shipping animated pages?

Before launch, have Claude open the page in Playwright or the Chrome DevTools MCP at a phone viewport, record a performance trace while scrolling and using the signature interaction, list every animated property, and confirm the reduced-motion version still communicates each state change. Then watch field data, because INP depends on real devices and real interactions. If the audit table shows more than a handful of animations, the honest fix is usually subtraction, not optimisation. A calm page with one memorable moment is what makes an AI-built site feel designed rather than generated.

Frequently asked questions

Short answers to the questions developers and founders ask most about animating AI-built websites.