WBL effects library

Page transitions

Pages cross-fade and shared photos morph when moving between pages. CSS only.

Use it for: Multi-page client sites (home ↔ service pages ↔ privacy). Previews are one page, so the value is on live client sites.
How: Add fx-page-transition.css to both pages; mark shared elements with data-vt="photo|title|header". Reduced motion turns it off.
Weight: 0.5 KB gzipped (CSS only, no JS), no dependencies

Page 1 of 2

Water heaters

Click through: the photo and title morph to their new place and the rest of the page cross-fades. Chrome/Edge 126+ and Safari 18.2+; others navigate normally.

Open the service page →