GSAP Loading Counter Curtain Preloader
proOn Load
Loading preview
Overview
A full-screen preloader built on a GSAP timeline: a 0 to 100 counter stutters like a real load, then a clip-path curtain wipes up and the page settles out of a slight zoom while the headline lines rise.
The count runs through uneven stops with short holds, which reads as a real load rather than a tween. A progress bar tracks it along the bottom edge.
Details
- Category
- Preloader
- Interaction
- On Load
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 8 componentsBuilt with the same techniques
(02)FAQ
GSAP Loading Counter Curtain Preloader — FAQ
01Does it block scrolling while loading?
Yes. The page is locked until the curtain lifts, then scrolling is restored exactly as it was.
02Can I run code when it finishes?
Pass onComplete. It fires once the curtain has lifted, a good moment to start other intro animations.
03How do I change the speed?
duration sets how long the count takes. The exit keeps its own timing, so it always feels deliberate.