2 JavaScript Page Transitions

by Vladimir 1 min read

This collection is your guide to creating smooth page transitions that turn a website into an SPA-like experience. It covers professional solutions based on Barba.js, which manage the animation lifecycle, as well as the cutting-edge View Transitions API for native cross-fades. For a deep understanding of the process, examples of manual implementation with Fetch API and Promise.all are featured.

Examples

Thumbnail grid expanding a selected image into a full-screen detail view, demonstrating continuous spatial interpolation

Fluid Shared Element Image Gallery

This is a Fluid Shared Element Image Gallery. It connects a thumbnail grid to a full-screen detail view through continuous spatial morphing. Its function is to eliminate context loss, carrying the user’s visual focus seamlessly from a macro overview to a micro inspection.

Technologies:
HTML SCSS JavaScript
Difficulty: Intermediate
Browser Support (as of Apr 2026):
Chrome Chrome 36+ Edge Edge 79+ Firefox Firefox 48+ Safari Safari 13.1+
Features:
FLIP Animation Shared Element Hardware Accelerated
Code by: pretender pretender
License: MIT
Selected Demos 2019-2020

Selected Demos 2019-2020

A highly interactive portfolio showcase powered by GSAP ScrollTrigger and Splitting.js. It features a custom fluid cursor, complex SVG text masking effects, and a seamless page transition system that loads external iframes into a 3D-transformed modal overlay upon interaction.

See the Pen Selected Demos 2019-2020.