Building a GSAP Footer Reveal Animation in React with AI

If you frequent Awwwards or premium agency portfolios, you've almost certainly seen the "Footer Reveal" effect. Instead of the footer scrolling into view like a normal block element, it appears to be fixed behind the page — and the main content peels away like a curtain to expose it.

It's one of the cleanest premium web interactions in existence. It signals to the visitor: this site was built with care. And critically, it keeps the footer visually present without it cluttering the main browsing experience.

The problem is, building it manually is genuinely painful. You're dealing with z-index stacking contexts that fight each other, dynamic margin calculations that break on mobile, and GSAP's ScrollTrigger plugin which has its own quirks. In this guide, we'll use engineered AI prompts to generate the exact code we need — precisely and instantly.

How the Footer Reveal Effect Actually Works

Before we use AI to generate the code, it helps to understand the underlying illusion. There are two core techniques:

1. The CSS-only approach: The footer is set to position: fixed; bottom: 0; z-index: 0. The main content wrapper gets a z-index: 1, a solid background, and a margin-bottom equal to the footer's height. As you scroll down, the main content slides up and over the footer, revealing it at the page end.
2. The GSAP parallax approach: We add a ScrollTrigger animation to the fixed footer that translates it on the Y-axis as the scroll progresses. This creates a depth illusion — the footer appears to slowly rise up from behind the content rather than simply appearing.

Prompt 1: The CSS Curtain Reveal (No JavaScript)

Start with the pure CSS version. This is the structural foundation that every other version builds on. The key insight: it's the main content that needs the magic CSS, not the footer. Use this prompt with ChatGPT-4o or Claude 3.5 Sonnet:

Why this prompt works: We've specified exact requirements (ResizeObserver, TypeScript, specific z-index values) that generic "footer reveal" prompts miss. These are the exact edge cases that cause the effect to break on mobile devices.

Prompt 2: Adding the GSAP ScrollTrigger Parallax

The CSS version is clean, but it's flat. To upgrade to award-winning quality, we animate the footer's position as it's revealed. This requires the @gsap/react package and the ScrollTrigger plugin:

The critical difference here is scrub: true. Without this, GSAP plays the animation once and it looks jarring. With scrub: true, the animation speed directly maps to scroll speed, creating a fluid, natural-feeling parallax that no CSS transition can replicate.

Prompt 3: The Full Next.js App Router Integration

If you're using Next.js 14+ with the App Router, you'll run into an additional constraint: GSAP and ScrollTrigger must be initialized only on the client. The safe pattern is using 'use client' and lazy initialization. Use this prompt to get a production-ready App Router version:

Pro Tips: The Gotchas No Tutorial Mentions

What the AI Generates: A Real Code Example

After running Prompt 1 through Claude 3.5 Sonnet, here's the type of clean, production-ready output you should expect:

'use client';
import { useState, useEffect, useRef } from 'react';

export function RevealLayout({ children, footer }: {
  children: React.ReactNode;
  footer: React.ReactNode;
}) {
  const footerRef = useRef<HTMLElement>(null);
  const [footerHeight, setFooterHeight] = useState(0);

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        setFooterHeight(entry.contentRect.height);
      }
    });
    
    if (footerRef.current) {
      observer.observe(footerRef.current);
    }
    
    return () => observer.disconnect();
  }, []);

  return (
    <>
      <div 
        className="relative z-10 bg-white dark:bg-gray-950"
        style={{ marginBottom: footerHeight }}
      >
        {children}
      </div>
      <footer
        ref={footerRef}
        className="fixed bottom-0 left-0 right-0 z-0 bg-gray-900"
      >
        {footer}
      </footer>
    </>
  );
}

Notice how the AI correctly implemented the ResizeObserver with cleanup, the dynamic margin calculation, and the proper z-index stacking — all the things you'd typically need to debug manually.

Frequently Asked Questions