Building a GSAP Footer Reveal Animation in React with AI
If you frequent Awwwards or premium agency portfolios, you have likely seen the "Footer Reveal" effect. Instead of scrolling down into view like a normal block element, the footer appears to be stuck to the back of the screen, and the main website content pulls up like a curtain to reveal it.
It is a stunning, premium interaction, but building it manually can be a CSS nightmare. You have to balance z-index stacking contexts, calculate dynamic margin-bottoms, and potentially wire up GSAP (GreenSock) for parallax effects. Instead of wrestling with the DOM, you can use these engineered AI prompts to generate the flawless component structure instantly.
Prompt 1: The Curtain Reveal (CSS Only)
The trick to the footer reveal actually has nothing to do with the footer moving—it's about fixing the footer in place and adding a spacer to the main content. This prompt instructs the AI to generate the exact Tailwind CSS structure required for the illusion.
"Act as a Senior Frontend Web Designer. Write a React layout structure using Tailwind CSS that creates a 'Footer Reveal' curtain effect. The main content wrapper should have a higher z-index, a solid background color, and a dynamic margin-bottom equal to the height of the footer. The footer component should be fixed to the bottom of the viewport with a lower z-index so it sits behind the main content. Ensure the layout remains fully responsive."Prompt 2: Adding the GSAP Parallax Effect
To take this from good to award-winning, the footer shouldn't just sit perfectly still. It should move slightly at a different speed than the scroll (parallax) as it gets revealed. This requires GSAP and the ScrollTrigger plugin.
"Extend the React footer component to include a GSAP ScrollTrigger parallax animation. Use the '@gsap/react' useGSAP hook. When the user scrolls past the bottom of the main content and the footer begins to reveal, animate the footer's 'y' translate property from -100px to 0px using a smooth ease. Bind this animation directly to the scroll progress using 'scrub: true'."The Dynamic Height Catch
Pro Tip: Footers rarely have a static height—they stretch and squeeze based on mobile breakpoints. Make sure the AI prompt generates a ResizeObserver or a useRef to dynamically measure the footer's height and apply that exact pixel value to the main wrapper's margin-bottom, otherwise, your curtain will get stuck halfway!
Need Prompts for GSAP or Three.js?
Scale your frontend development. Browse our directory of optimized AI prompts designed specifically for React developers and UI engineers.
Explore Web Component Prompts