Skip to content
motionprompts motionprompts

AlaDesign Landing Page Reveal

GSAP animation component · Published 2026-07-21 · by vanguardia.dev

Open live demo ↗ Download source

What it does

Preloader-to-hero landing page reveal driven by three parallel GSAP timelines with a custom 'hop' ease: a dark overlay counts 0 to 100 while masked overlay text steps through three lines, five portrait images rise and collapse their flex gap, the side images wipe away with clip-path as the center image scales up, then the overlay wipes upward and the giant hero name slides in word by word (SplitText). Plays automatically once on page load, about 7 seconds total.

How it's built

Categorypreloader
Techgsap
GSAP pluginsCustomEase, SplitText
Complexitypage
Performance costmedium
Mobile-safeyes

preloader reveal counter clip-path splittext customease landing hero stagger intro

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 — Preloader-to-Hero Intro
## Goal
Build a full-screen fashion/editorial landing hero with a cinematic **preloader-to-hero reveal** that plays automatically once on page load (~7 seconds). A dark overlay counts `0 → 100` while a small masked label steps through three words; five portrait images rise from below, collapse their gap and scale up; the four side images wipe away upward with a clip-path while the center image scales to fill the screen; finally the dark overlay wipes upward to reveal a giant hero name that slides in word by word. Everything is driven by three parallel GSAP timelines sharing one custom ease called `hop`.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins **`CustomEase`** and **`SplitText`**. No smooth-scroll library (the page does not scroll during the intro). Register the plugins with `gsap.registerPlugin(CustomEase, SplitText)`. Fire the whole sequence on `DOMContentLoaded`.
## Layout / HTML
Semantic structure (class names are load-bearing — the JS/CSS query them):
```
<nav>
  <div class="nav-logo"><a href="#">Elara Vandenberg</a></div>
  <div class="nav-items">
    <a>Runway</a><a>Lookbook</a><a>Campaigns</a><a>Biography</a>
…

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.