GSAP Loading Animations

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. Both preloaders here can skip repeat visitors within a session, respect prefers-reduced-motion, and leave the page fully readable when JavaScript never runs, because the overlay only takes effect once the script is running.