GSAP Reveal Footer with Giant Animated Wordmark
Overview
A footer for React and Next.js that stays put while the page lifts off it. A giant wordmark scaled to the full width climbs out of its mask as you scroll, and its letters lift under the cursor.
The reveal uses position: fixed inside a clip-path, so the browser's own scrolling drives it and it can't jitter on touch screens. Drop the footer after your content and it works with no z-index changes to the rest of the page.
Details
- Category
- Footer
- Interaction
- On Scroll + Mouse Move
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 029 / Hero
GSAP Magazine Cover Hero with Cut-Out Models and Variable Type
On Load · Mouse Move · On Click · On Scroll
No. 028 / Gallery
GSAP Horizontal Scroll Gallery with Lenis and Fullscreen Project View
On Scroll · Mouse Move · On Hover · On Click
No. 018 / Scroll
GSAP WebGL Knockout Dive & Aperture Scroll Section
On Scroll · On Load · Mouse Move · On Hover
(02)FAQ
GSAP Reveal Footer with Giant Animated Wordmark — FAQ
01What if the footer is taller than the screen?
It checks. A fixed footer that doesn't fit could never show its top, so on short screens it switches itself back to normal scrolling and keeps the wordmark animation.
02How do I get the rounded page corners from the demo?
Give your main element a background, rounded bottom corners, position: relative and a z-index, then pull the footer up underneath it with a negative top margin such as -mt-10.
03Why isn't the reveal working on my page?
An ancestor with transform, filter or perspective makes position: fixed behave like absolute. Keep the footer outside any wrapper that sets those.
04How do I set the colours?
Add background and text classes through className, such as bg-[#0E3B2E] text-[#F2EBDD]. The fixed layer inherits them.
05What happens with reduced motion?
It renders as a normal static footer with the wordmark already in place, and the back-to-top button jumps instead of gliding.