# 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. Canonical: https://gsapvault.com/effects/page-preloader Live demo: https://gsapvault.com/demos/page-preloader/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | load-sequence, count-up, curtain-reveal, stagger, page-transition | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## Use Cases - 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add the overlay as the FIRST thing inside ``:** ```html
Your Brand
Loading page
``` **3. Mark the elements that should stagger in after the curtain clears:** ```html

Your headline

Your standfirst

``` **4. Add before closing `` tag:** ```html ``` ### Options All options go on the `data-preloader` overlay element. | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-preloader-duration` | Seconds | `2.4` | How long the counter takes to reach 100 (or 90 in wait mode) | | `data-preloader-once` | `true`, `false` | `false` | When `true`, the sequence runs once per browser session; repeat visitors skip straight to the page | | `data-preloader-wait` | `true`, `false` | `false` | When `true`, the counter holds at 90 until the window `load` event fires, then sprints to 100 — the number reflects real asset loading | | `data-preloader-exit` | `wipe`, `split`, `iris`, `fade` | `wipe` | Exit animation. `wipe`: twin panels wipe upward, front first, back chasing. `split`: the panels part sideways like doors, front sliding out left with the back chasing out right. `iris`: a circular opening grows from the centre of the screen. `fade`: the overlay fades out with a slight scale-up, quick and clean | ### Accessibility - **Reduced motion**: with `prefers-reduced-motion: reduce` the sequence never runs — the overlay is hidden and content is simply there. This is enforced twice: in CSS via the media query and in JavaScript via `gsap.matchMedia`. - **No JavaScript**: the overlay is `display: none` by default and reveal targets are only pre-hidden when the `has-js` class is present, so the page renders as a plain readable document. - **Screen readers**: the counter is `aria-hidden` (a number flashing to 100 is noise); a visually hidden `role="status"` element announces "Loading page" instead. - **Scroll lock**: scrolling is disabled only while the overlay is up and always released, including on the skip paths. ### Dependencies **Required:** - GSAP 3.12+ (core only — no plugins) ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Page Preloader](https://gsapvault.com/effects/page-preloader) - [Effects & Templates Vault (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt