GSAPLoadingAnimations
The first animation a visitor sees is the load itself. Preloaders that report real progress, overlays that clear with intent, and content that arrives in a considered order rather than all at once.
Unlock everything for £39
All 76 premium effects and templates, plus every future effect and template we release. That's £0.51 per item.
Buy individually now: up to £10 comes off the Vault later
Building Loaders and Page Transitions with GSAP
A loading animation buys you attention during the one moment a visitor expects to wait. Done well it makes a slow connection feel deliberate instead of broken: a counter that climbs, an overlay that clears cleanly, and content that settles into place behind it. Done badly it adds a delay to a page that had already finished loading.
The honesty of the progress number is what separates the two. A counter animating to 100 on a fixed timer is decoration, and visitors on slow connections still hit a blank page when it finishes. Holding the count short of the finish until the window load event fires, then completing it, means the number reflects real asset loading and the overlay never clears early.
The exit is where the transition earns its keep. A curtain wipe, split doors, an expanding iris, or a plain fade each set a different tone, and whichever you choose should hand off to the page rather than stop dead: staggering the hero content in behind the clearing overlay ties the two halves into one movement instead of two separate animations.
Loaders carry accessibility obligations the rest of the catalogue does not, because they gate the content. Every pattern here caps how long it can hold the page, skips repeat visitors within a session, clears completely under prefers-reduced-motion, and leaves the page fully readable when JavaScript never runs at all.
Related Guides
Why GSAP animations get janky and how to fix it
Jank comes from the wrong properties, layout thrash, and heavy scroll work. Learn how to keep GSAP animations on the compositor and hitting 60fps.
Read guide
Animate on Scroll: 3 Approaches Compared
Learn to trigger animations on scroll. Compare CSS scroll animations, Intersection Observer, and GSAP ScrollTrigger to find the right approach.
Read guideFrequently Asked Questions
Do preloaders slow down my site?
A badly built one does, by holding the page after it is ready. A good one only covers time the visitor would have spent waiting anyway. Tie the overlay to the window load event rather than a fixed duration, cap how long it can hold the page, and skip it for repeat visitors within a session so it never becomes a toll on every navigation.
Should the loading percentage reflect real progress?
Yes, as far as it can. A counter on a fixed timer is decoration and will finish before the assets do on a slow connection. Holding the count short of 100 until the load event fires, then completing it, keeps the number honest without needing per-asset tracking.
What happens if JavaScript fails to load?
The page must still be readable. A full-screen overlay that is only removed by JavaScript will hide your content permanently if the script fails or is blocked. The pattern here leaves the page visible without JavaScript rather than trapping it behind an overlay that never clears.
How do I chain my own animations after the preloader?
Listen for the completion event the effect dispatches rather than guessing at a delay. That lets your hero timeline start exactly as the overlay clears, and it stays correct when the load takes longer or shorter than you expected.