Animated websites don't hurt SEO by being animated. Google has no ranking penalty for motion. What it does is read your HTML and measure real-user speed and stability. Animated website SEO goes wrong when motion hides content from the crawler, or when heavy animation drags Core Web Vitals into the red.
So the question isn't "should we animate?" It's "can Google read the page before the animation runs?"
What Google actually measures
Two things matter for a motion-heavy site.
1. What's in the rendered HTML. Googlebot queues pages for rendering, then a headless Chromium renders the page and executes the JavaScript when resources allow. Google indexes what it finds in that rendered HTML. It also only follows links that are <a> elements with an href.
2. Page experience, including Core Web Vitals. Google says Core Web Vitals are used by its ranking systems, but also that "there is no single signal" and that it "always seeks to show the most relevant content, even if the page experience is sub-par."
Translation: a slow animated site with great content can still rank. A fast animated site whose content Google can't read cannot.
The four real risks for animated website SEO
1. Content that only appears on scroll
Google's lazy-loading guidance is blunt: "Google Search does not interact with your page." If a section's text is fetched or injected only when a user scrolls to it, Google may never see it.
The fix is to separate content from choreography. The text should be in the HTML from the start; the animation only changes how it appears. A headline that fades in from opacity: 0 is still in the DOM. A headline that a scroll handler fetches from an API is not.
This is the core scroll animation SEO rule for scrollytelling websites: every step of the story exists as real text in the page, and scroll only reveals it.
2. Content that only exists in JavaScript
Client-side apps that render everything in the browser leave an empty shell in the initial HTML. Google can render JavaScript, but rendering happens later, and Google itself still recommends server-side rendering or pre-rendering because not all bots can run JavaScript. Link-preview scrapers commonly fall into that group.
Next.js, Astro and similar frameworks solve this: server-render the page, then let GSAP and Three.js enhance it after load.
3. Text painted inside a canvas
WebGL and canvas output is pixels. As Utsubo puts it, a <canvas> element has zero indexable text. If your headline is rendered as 3D type in the scene, Google sees nothing.
Keep the headline, sub-headline and CTA as DOM text layered over the canvas. Render the 3D type for the eye, and keep the real text for the crawler and screen readers. We cover this in detail in WebGL website SEO.
4. Navigation and states without URLs
Page transitions built on <div onClick> instead of real links break crawling. So do product colorways or apartment states that change only in JavaScript. Utsubo's rule: one indexable URL per meaningful state, for example /product/x?color=black. Use real <a href> links and animate the transition on top.
Risk vs fix at a glance
| Animated pattern | What Google may see | Fix |
|---|---|---|
| Text fades in on scroll | Text present (fine) | Keep it in HTML, animate opacity/transform |
| Text loaded on scroll | Nothing | Ship text in the initial HTML |
| Client-only React app | Empty shell until rendered | Server-side render or pre-render |
| 3D headline in canvas | No text | DOM text over the canvas |
| JS-only page transitions | Missing links | Real <a href> links, animate on top |
| Heavy intro animation | Late LCP | Visible hero first, motion after |
Speed still counts
Motion affects rankings through Core Web Vitals, mostly LCP. A hero that waits for an intro animation delays the largest paint; a 3D bundle in the critical path does the same. The specifics are in do animations slow down your website?, but the short version: render the hero in HTML, lazy-load heavy motion, animate only transform and opacity.
How to test your animated site in 15 minutes
- URL Inspection in Search Console. Run a live test and open the rendered HTML. Search for your H1, a sentence from mid-page, and your nav links.
- Disable JavaScript. In Chrome DevTools, turn JS off and reload. What's left is roughly what a non-rendering bot sees.
- Check the field data. Search Console's Core Web Vitals report shows whether real mobile users get "good" LCP, INP and CLS.
- Click every state. If a colorway, tab or scene changes without the URL changing, it can't be indexed on its own.
