GSAP Column Preloader & Blooming Lily Hero Section
Overview
A full-screen hero behind a column preloader: a 000 to 100 counter fills a marigold bar, eight columns lift away from the centre, and the page builds itself in as the headline's letters streak across and an SVG lily draws its stem and unfurls. Scrolling pins the hero, tears the headline apart and closes it behind rising columns into an outro line.
The loader counts from 000 to 100 in one big figure while a marigold bar fills beneath it and its tag decodes from "Taking our time" to "Almost in bloom". The copy then drops out of its masks and the columns behind it lift away from the centre out, eight on desktop and four on phones. The page is held still while it plays and handed back the moment the columns start to lift.
Details
- Category
- Preloader
- Interaction
- On Load + On Scroll + Mouse Move + On Hover
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 20 componentsBuilt with the same techniques
No. 018 / Scroll
GSAP WebGL Knockout Dive & Aperture Scroll Section
On Scroll · On Load · Mouse Move · On Hover
No. 019 / Scroll
GSAP Pinned Service Cards with Animated Reveals
On Scroll · On Hover · Mouse Move · On Click
No. 017 / Gallery
GSAP Scroll Unfolding Card Wheel Portfolio
On Scroll · On Hover · On Click · Mouse Move · On Load
(02)FAQ
GSAP Column Preloader & Blooming Lily Hero Section — FAQ
01What do I need to install?
npm install gsap @gsap/react. SplitText, ScrambleText, DrawSVG and ScrollTrigger all come with gsap. It's built for React or Next.js with Tailwind CSS v4.
02Which fonts does it use?
Classic sets the headline and copy in Geist and the labels in Geist Mono, which create-next-app already loads as --font-geist-sans and --font-geist-mono; the outro's italic is Instrument Serif as --font-instrument-serif. Luxe needs Bodoni Moda as --font-bodoni-moda, loaded with next/font and its opsz axis as in the example. Each falls back to a system face, but the headline's cascade is measured from these fonts' glyphs, so it lines up best with them.
03Can I change the headline?
The words are in LINES at the top of bloom-preloader.tsx. Each line's desktop offsets are in em, measured so the letters lock together (the "i" of "is a" sits under the "o" of "Slow"), so new words need new offsets, and the desktop sizing in .bloom-headline assumes the cascade's width and height.
04Does it block scrolling while loading?
Yes. The page is scrolled to the top and wheel, touch and keyboard scrolling are held until the columns start to lift. The scrollbar stays put the whole time, so nothing shifts when scrolling comes back.
05Can I put sections below it?
Yes. It pins for 1.7 screens of scroll, then lets the page carry on. It's meant to open the page: the loader covers the whole screen and the intro plays from the top.
06What happens with reduced motion?
The loader is skipped and the hero shows still, with no pin, loops, pointer effects or custom cursor.