GSAP Image Stack Counter Preloader
freeOn LoadOn Click
Loading preview
Overview
A full-screen studio preloader with a 0–100 counter, stacked photo cards and a clip-path expansion into a split-text hero.
The source component is copied verbatim from the Creative Section Free 3 preloader. Four photo cards reveal as the counter and progress bar reach 100, then the final card expands into the matching full-screen hero.
Details
- Category
- Preloader
- Interaction
- On Load + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 020 / Preloader
GSAP Column Preloader & Blooming Lily Hero Section
On Load · On Scroll · Mouse Move · On Hover
No. 023 / Hero
GSAP Botanical Drink Slider Hero with Pour Preloader
On Load · On Scroll · Drag · Mouse Move · On Click
No. 008 / Preloader
GSAP Loading Counter Curtain Preloader
On Load
(02)FAQ
GSAP Image Stack Counter Preloader — FAQ
01What do I need to install?
Install gsap and @gsap/react. SplitText is imported from gsap/SplitText.
02Can I use my own photos or change the loading time?
Yes. Edit the HERO_ART, CARDS and LOAD_TIME constants in the component source.