The Lottie Animation Hiding Your Homepage from Google and ChatGPT
Your homepage hero is a Lottie animation. Beautiful. Smooth. Your designer nailed it.
Your homepage hero is a Lottie animation. Beautiful. Smooth. Your designer nailed it.
Google can't read it. ChatGPT can't read it. Claude can't read it.
The text is in the animation layer, not in the DOM. When a search engine crawls your page, they see an empty div. When an AI model scrapes your site, they see nothing.
You've hidden your most important content from every bot that matters.
How to Detect It
View source check:
Right-click → View Page Source. Search for H1.
If you don't find an H1 tag on the page, you have a problem.
ChatGPT site-fetch test:
In ChatGPT, ask: "Summarize the content on my homepage. Here's the URL: [your site]"
If ChatGPT says "I couldn't find much content on that page," your content is hidden in animations or JavaScript.
Google Search Console:
Go to Google Search Console → Pages → Homepage.
Click on the URL. Select "View Cached Version."
If your hero text isn't visible in the cached version, you have a problem.
Why This Matters
Google still cares about content accessibility for ranking purposes. But AI search (ChatGPT, Claude, Perplexity) relies entirely on semantic understanding of your content.
If your hero text is in an animation, AI can't understand what your company does.
When someone asks ChatGPT "who makes software for financial advisors," your site won't even be a candidate if your hero text is hidden.
This is 2025. AI search is 40% of new search behavior. You can't ignore it.
The Technical Issue
Lottie animation problem:
A Lottie file renders as an SVG animation in the browser. The text inside the animation is not in the HTML DOM—it's in the SVG layer or the animation data.
When Google crawls: sees the Lottie component, but no text.
When an AI fetches your page: sees HTML, but no H1.
Intersection-observer reveals:
Text is hidden off-screen. JavaScript detects when it enters the viewport and animates it in.
Until the user scrolls, the text doesn't exist in the DOM. Search engines and AI models crawl the page and don't see the text.
JS-injected H1s:
JavaScript creates the H1 after the page loads.
Search engines can see it (they run JavaScript). AI models sometimes can, sometimes can't. Depends on whether they execute JavaScript.
Lazy-loaded above-the-fold content:
Your hero section is a skeleton or empty div until the user reaches it. Then the real content loads.
This is the worst. You're literally telling search engines that your hero content is secondary.
The Fix: Server-Render the Text, Animate the Wrapper
Before (wrong):
html <section class="hero"> <LottieComponent animationData={heroAnimation} /> </section>
Lottie component contains the text. Text is in the animation, not the DOM. Crawlers see nothing.
After (correct):
html <section class="hero"> <div class="hero-content animate-fade-in"> <h1>We help financial advisors manage $1B+ in assets</h1> <p>Streamlined, compliant, investor-focused</p> <button>Get Started</button> </div> <LottieComponent animationData={backgroundAnimation} /> </section>
The text is in the DOM. The Lottie is a background animation, not a container.
The text animates in (CSS animation or fade), the Lottie animates in separately.
CSS animation (right way):
`css .animate-fade-in { animation: fadeIn 0.8s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } `
Now: Text is in the DOM (crawlers can read it). Text is animated (users see the beautiful fade-in). Everyone wins.
Other Animation Patterns That Nuke SEO
1. Intersection-observer reveals
The problem:
javascript const header = document.querySelector('h1'); const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { header.classList.add('animate-in'); } }); observer.observe(header);
H1 is in the HTML, but the animation only triggers when it's in the viewport.
Search engines crawl above-the-fold content first. They might not scroll to this element. It's there, but it's not prominent.
The fix: Remove the observer logic. H1 is always visible. Animate it in on page load with CSS, not JavaScript visibility checking.
2. JS-injected H1s
The problem:
javascript document.querySelector('hero').innerHTML = '<h1>Our Title</h1>';
The H1 doesn't exist until JavaScript runs. Some crawlers see it. Some don't. Inconsistent.
The fix: H1 exists in the HTML. Use JavaScript to animate it, not create it.
3. Lazy-loaded above-the-fold content
The problem:
html <section class="hero"> <img src="placeholder.gif" /> <!-- Real content loads here via lazy-loading library --> </section>
The hero section shows a placeholder. Real content loads later.
To a crawler, the hero is empty. The content is secondary.
The fix: Load above-the-fold content on page load, not lazy. Lazy-load below-the-fold content (pricing tables, testimonials, footer content).
4. Animation libraries that hide content off-screen
The problem:
Content is off-screen (left: -1000px). CSS animation moves it into view.
If the crawler doesn't execute the animation, it doesn't see the content.
The fix: Content is on-screen by default. Animation changes opacity or transform, not position.
The Accessibility Bonus
Fixing these issues also fixes accessibility.
When your H1 is hidden in an animation, screen readers can't read it. Blind users don't know what your page is about.
When your text is in the DOM and animated separately, screen readers can read it and users see the animation.
The Audit Checklist
- [ ] H1 exists in the HTML (not rendered by JavaScript)
- [ ] H1 is visible in View Source
- [ ] H1 is visible in Google's cached version
- [ ] ChatGPT can summarize your homepage correctly
- [ ] Above-the-fold content is not lazy-loaded
- [ ] Animations don't move content off-screen; they animate opacity or transform
- [ ] Lottie animations are backgrounds, not containers
- [ ] No intersection-observer logic hiding above-the-fold content
Fail any of these? Fix it.
The Cost of Ignoring This
You lose:
- Google ranking visibility: Your content isn't well-indexed
- AI search visibility: ChatGPT, Claude, Perplexity can't understand your company
- Accessibility: Screen readers can't read your content
- Link equity: When other sites link to you, the text they anchor to might not make sense
It's not a small thing. It's your most important page on your site.
The Fix Timeline
If you have a Lottie hero: 1–2 days to refactor. Move text to DOM, keep Lottie as background.
If you have intersection-observer reveals: 1 day. Remove the observer, use CSS animation.
If you have lazy-loaded above-the-fold content: 1–2 days. Load it on page load instead.
This isn't a redesign. It's a technical fix. Get it done.