Page Preloader
A complete load sequence: a counter climbs to 100 behind a full-screen overlay, the overlay clears with one of four exit styles (curtain wipe, split doors, iris, or fade), and the page content staggers in behind it.
About This Effect
A full page-load sequence built on GSAP core alone, with no plugins required. A fixed overlay carries a brand mark, a tabular-figure counter that climbs to 100, and a thin progress bar; when the count completes, the overlay chrome lifts away, twin curtain panels wipe upward in a two-tone swipe, and every element you mark as a reveal target staggers into place behind the clearing curtain. One attribute swaps that default wipe for split doors, an iris opening from the centre, or a quick clean fade.
The counter can be pure theatre on a fixed duration, or hold at 90 until the browser's load event so it reflects real asset loading. A once-per-session mode skips the sequence for returning visitors, and a preloader:complete event lets you chain your own animations off the end of the exit.
Everything is driven by data attributes on the overlay element, and the whole thing degrades cleanly: without JavaScript the overlay never renders and the page is a plain document.
What's Included
- Counter with tabular figures and progress bar synced to one proxy value, never drifting apart
- Four exit styles on one attribute: two-tone curtain wipe, split doors, iris opening from the centre, or a clean fade
- Staggered entrance for any element marked data-preloader-reveal, timed to the clearing curtain
- Wait mode holds at 90 until the window load event, so the number reflects real loading
- Once-per-session mode via sessionStorage so repeat visitors skip straight to the page
- preloader:complete event on document for chaining hero animations or analytics
- Scroll locked while the overlay is up, released the moment the curtain clears
- No plugins: GSAP core only, and a plain readable page when JavaScript is off
Perfect For
- Portfolio and studio sites that open with a branded moment instead of a paint flash
- Image-heavy landing pages using wait mode to cover real asset loading
- Campaign and product-launch pages where the reveal is part of the pitch
- Agency sites chaining hero type animations off the preloader:complete event
- Any site swapping a spinner for a designed, skippable load sequence
How It Works
A single proxy object animates from 0 to 100 with gsap.to(), and its onUpdate writes both the padded counter text and the bar's scaleX, which is why the number and the bar can never disagree. In wait mode the tween stops at 90 and a load listener (or an already-complete readyState) triggers the final sprint to 100.
Completion hands off to an exit timeline: overlay chrome fades up and out with a stagger, the two curtain panels wipe to yPercent -100 with expo.inOut offset by a fraction of a second, and the reveal targets animate y and autoAlpha in a stagger that starts before the curtain has fully cleared. The script adds a has-js class to the html element before first paint; all hiding CSS is gated behind it, so no JavaScript means no overlay and no hidden content, and gsap.matchMedia routes reduced-motion users to the same skip path.
A data-preloader-exit attribute swaps the middle of that exit timeline: split slides the panels out sideways in opposite directions like parting doors, iris tweens a CSS variable that drives each panel's radial-gradient mask into a growing circular hole so the opening reads as an expanding ring, and fade takes the whole overlay out on autoAlpha with a slight scale-up. Every style ends the same way, with the overlay set to display none, the scroll lock released, and preloader:complete dispatched.