64 JavaScript Gallery Examples (Page 2)

Alpine.js Grid Image Gallery with Lazy Loading

WebGL Grid Gallery

Photo³ — Three-Layer Image Gallery

Scroll-Accelerated Vertical Gallery

WebGL Image Ring with GSAP and Three.js

Gallery-to-Overlay Transition

Momentum-Distortion Gallery Slider

Infinite Draggable Image Gallery

Seamless Grid to Slider Transition with GSAP & FLIP

Image Gallery with View Transitions API and Scroll-Driven Animations

demo & code

An advanced gallery with a carousel based on the native <dialog> element and Scroll-Driven Animations, where the View Transitions API synchronizes the modal opening with the carousel scroll to the selected image, delivering a smooth and functional UX.

x close

See the Pen Image Gallery with View Transitions API and Scroll-Driven Animations.

Lightbox with View Transition API

demo & code

An advanced lightbox implementation using a Web Component and the native <dialog> element, where the smooth image transition between thumbnail and fullscreen is powered by the View Transitions API.

x close

See the Pen Lightbox with View Transition API.

Responsive Lightbox Gallery using View Transition API

demo & code

A demo showcasing smooth gallery state transitions using the modern View Transitions API, which dynamically assigns viewTransitionName and includes a fallback for non-supporting browsers, ensuring clean DOM updates.

x close

See the Pen Responsive Lightbox Gallery using View Transition API.