Our Revolution Landing Page Reveal
What it does
A preloader-to-hero landing reveal driven by a single GSAP timeline: a row of seven tall portrait images rises from below and staggers in, the whole strip slides horizontally, the side images and then the full black loader wipe away upward via clip-path, and finally the nav, hero headline and footer thumbnails slide up and fade in. Plays automatically once on page load using power3.inOut easing, about 6 seconds total.
How it's built
| Category | preloader |
|---|---|
| Tech | gsap |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Landing Page Reveal — Portrait-Strip Preloader Wipe-Up
## Goal
Build a full-screen editorial landing hero with a cinematic **preloader-to-hero reveal** that plays automatically once on page load (~6.5 seconds total). A black full-screen loader holds a horizontal strip of **seven tall portrait images** (six photos plus a centered white monogram logo). On load the seven images **rise up from below** and stagger in, then the whole strip **slides sideways**; the six photos (but not the center logo) **wipe away upward** one after another via an animated `clip-path`; the entire black loader panel then **wipes upward** the same way, uncovering the page beneath; finally the nav links, the three-line hero headline, and the four footer thumbnails all **slide up and fade in**. Everything is driven by one single GSAP timeline using `power3.inOut` easing.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) only — **no** GSAP plugins and **no** smooth-scroll library (the page never scrolls; `body` is `overflow:hidden`). Import the default export (`import gsap from "gsap"`) and fire the whole sequence inside a `DOMContentLoaded` listener.
## Layout / HTML
Semantic structure (class names / the `#loader-logo` id are load-bearing — the JS/CSS query them):
```
<div class="container">
<!-- fixed black preloader on top of everything -->
<div class="loader">
<div class="loader-imgs">
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.