Curtain Transition
Between two real pages, an ink panel rises with the name of the next page, then lifts off onto it. Back plays it in reverse. Curved edge or from the top. Chrome, Edge, Safari.
View codeThe library
Preloaders & transitions
7 preloaders & transitions components in plain HTML, CSS and JS.
Logo Collapse
The logo fills the screen while the page loads, then flies into the header as the screen rolls up. Its line tracks the real load. Any click or key skips it; data-once plays it once per visit.
View code
Shared Element Morph
Between two real pages, the picture you click grows into its place on the next page while the rest of it plays its entrance. Back, it shrinks into its card. Chrome, Edge, Safari.
View code
Soft Swap
Between two real pages, the one you leave fades out drifting up while the next slides in from just below, and the header stays put. CSS only, no script. Chrome, Edge, Safari; Firefox loads plainly for now.
View code
Stairs Transition
Between two real pages, five ink bands climb over the page like a staircase, then step off onto the next one. Back starts from the other edge. Chrome, Edge, Safari.
View code
Page Lift
Between two real pages, the one you leave recedes as the next rises over it on a rounded edge. The header stays, back plays it in reverse. Chrome, Edge, Safari; Firefox loads plainly for now. No GSAP.
View code
Landing Reveal
A preloader that counts the files your hero really needs while its images rise onto a pile. At 100 the hero image comes up last and grows into place, then the title rises. Click or any key skips. No GSAP.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it