GSAP Countdown Timer Hero Section with Waitlist Form
Overview
A launch hero for React and Next.js. Every digit of the countdown turns on its own wheel and shows its neighbours through the edges, with an email waitlist form below. At zero the accent colour floods the page and the form becomes your link.
A coming-soon page has one job, and this one does it at full width. The digits are real mechanical-style wheels, always rolling downward with a small overshoot, with the next number just visible at the top edge. The type scales itself so the counter fills the screen, even when the day count grows to three digits.
Details
- Category
- Hero
- Interaction
- On Load + On Click
- Trigger
- On Load
- 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. 023 / Hero
GSAP Botanical Drink Slider Hero with Pour Preloader
On Load · On Scroll · Drag · Mouse Move · On Click
No. 022 / Hero
GSAP Editorial Night Hero with Growing Botanical SVG
On Load · Mouse Move · On Hover · On Click
(02)FAQ
GSAP Countdown Timer Hero Section with Waitlist Form — FAQ
01How do I set the launch date?
Pass target a Date, an ISO string such as 2027-03-14T18:00:00Z, or a timestamp in milliseconds. Include the UTC offset so everyone counts down to the same moment. Pass null to show zeros until you have a date.
02How do I connect the email form?
Pass onSubmit, which receives the email. If it returns a promise, the button shows sendingLabel until it settles. Success shows confirmation, and a rejected promise shows errorMessage and keeps the form so people can try again.
03What happens at zero?
The accent floods the hero, the heading becomes liveHeading, the description becomes liveDescription and the form is replaced by liveAction. Someone who loads the page after launch sees that state straight away, without the animation.
04How do I use it with a different font?
Set the font through className, and set --digit-ratio to the width of one digit's column in em. It's 0.62 by default, which suits most sans-serifs. The demo uses 0.53 for the condensed Anton.
05What happens with reduced motion?
The digits change without rolling, the flood at zero is instant and the entrance is skipped. The countdown, form and live state all work as normal. Screen readers get a sentence of days, hours and minutes instead of the wheels.