Gallery-to-Overlay Transition
A gallery-to-overlay transition built with modern frontend techniques for responsive and reusable UI.
Galleries
67 snippetsWelcome to the Galleries resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-gallery
Snippets(67)
- Infinite Draggable Image Gallery
A infinite draggable image gallery built with modern frontend techniques for responsive and reusable UI.
- Photo³ — Three-Layer Image Gallery
A photo³ — three-layer image gallery built with modern frontend techniques for responsive and reusable UI.
- Scroll-Accelerated Vertical Gallery
A scroll-accelerated vertical gallery built with modern frontend techniques for responsive and reusable UI.
- WebGL Image Ring with GSAP and Three.js
A webgl image ring with gsap and three.js built with modern frontend techniques for responsive and reusable UI.
- Alpine.js Grid Image Gallery with Lazy Loading
A alpine.js grid image gallery with lazy loading built with modern frontend techniques for responsive and reusable UI.
- Seamless Grid to Slider Transition with GSAP & FLIP
A seamless grid to slider transition with gsap & flip built with modern frontend techniques for responsive and reusable UI.
- Shader Image Transition
A shader image transition built with modern frontend techniques for responsive and reusable UI.
- WebGL Grid Gallery
A webgl grid gallery built with modern frontend techniques for responsive and reusable UI.
- Dynamic Grid Gallery with JavaScript
A dynamic grid gallery with javascript built with modern frontend techniques for responsive and reusable UI.
Flip Grid Size with GSAPA flip grid size with gsap built with modern frontend techniques for responsive and reusable UI.
Full Screen Image Reveal EffectA full screen image reveal effect built with modern frontend techniques for responsive and reusable UI.
Full Screen Scroll Slideshow with Sound FXA full screen scroll slideshow with sound fx built with modern frontend techniques for responsive and reusable UI.
Grid Items View with Flip PluginA grid items view with flip plugin built with modern frontend techniques for responsive and reusable UI.
Layout Explorations with GSAP, Flip, Lenis and ScrollTrigger N°2A layout explorations with gsap, flip, lenis and scrolltrigger n°2 built with modern frontend techniques for responsive and reusable UI.
Liquid Gallery with 3D Image HoverA liquid gallery with 3d image hover built with modern frontend techniques for responsive and reusable UI.
Our Best Friends Gallery ZoomA our best friends gallery zoom built with modern frontend techniques for responsive and reusable UI.
Photo Gallery with a Comic TouchA photo gallery with a comic touch built with modern frontend techniques for responsive and reusable UI.
- Ripple Effect with Three.js & GSAP
A ripple effect with three.js & gsap built with modern frontend techniques for responsive and reusable UI.
Swiper Center Thumbnail SliderA swiper center thumbnail slider built with modern frontend techniques for responsive and reusable UI.
The 7 (+3) Modern Wonders of the World - Slide GalleryA the 7 (+3) modern wonders of the world - slide gallery built with modern frontend techniques for responsive and reusable UI.
Vanilla JS Skew Images on ScrollA vanilla js skew images on scroll built with modern frontend techniques for responsive and reusable UI.
Image Gallery with GSAP Observer PluginA image gallery with gsap observer plugin built with modern frontend techniques for responsive and reusable UI.
- Momentum-Distortion Gallery Slider
A momentum-distortion gallery slider built with modern frontend techniques for responsive and reusable UI.
Yet Another SliderA yet another slider built with modern frontend techniques for responsive and reusable UI.
Let's Move! GSAP Infinite Horizontal ScrollA let's move! gsap infinite horizontal scroll built with modern frontend techniques for responsive and reusable UI.
Parallax Carousel with GSAP ObserverA parallax carousel with gsap observer built with modern frontend techniques for responsive and reusable UI.
- Parallax Photo Carousel
A parallax photo carousel built with modern frontend techniques for responsive and reusable UI.
Swiper Slider Abstract Art GalleryA swiper slider abstract art gallery built with modern frontend techniques for responsive and reusable UI.
- Flex Cards Expand on Hover
A flex cards expand on hover built with modern frontend techniques for responsive and reusable UI.
Tilt Grid Content RevealA tilt grid content reveal built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
3D Hover Tilt, Grid Expansion, Staggered Typography, Scroll to Top
Adaptive Thumbnail CarouselA adaptive thumbnail carousel built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 69+, Edge 79+, Firefox 63+, Safari 13.1+Features
Responsive Design, Scroll Snapping, Keyboard Navigation, Thumbnail Preview
Responsive Image Grid with Slider and SearchA responsive image grid with slider and search built with modern frontend techniques for responsive and reusable UI.
Asymmetric SVG Mask Grid GalleryA asymmetric svg mask grid gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 120+, Edge 120+, Firefox 53+, Safari 15.4+Features
SVG Masks, Grid Areas, Lightbox Modal
Invisible GalleryA invisible gallery built with modern frontend techniques for responsive and reusable UI.
Atmospheric Split-View GalleryA atmospheric split-view gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 41+, Edge 79+, Firefox 32+, Safari 8+Features
Texture Blending, Card Flip, Keyboard Navigation, Class-based State
Scroll-Driven Image SwapperA scroll-driven image swapper built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
AdvancedBrowser support
Chrome 115+, Edge 115+. Firefox/Safari (via GSAP Polyfill)Features
Scroll-Linked Animation, Image Crossfade, Polyfill Strategy, Responsive Grid
Image CarouselA image carousel built with modern frontend techniques for responsive and reusable UI.
Noisy Image Gallery Navigation with Custom JSA noisy image gallery navigation with custom js built with modern frontend techniques for responsive and reusable UI.
Interactive Card with Floating Lightbox ImagesA interactive card with floating lightbox images built with modern frontend techniques for responsive and reusable UI.
Tactile Long Press Image GridA tactile long press image grid built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+Features
Long Press Interaction, Responsive Grid, Touch Support, Instant Preview
Animated Portfolio with SVG ClipPath Hover EffectA animated portfolio with svg clippath hover effect built with modern frontend techniques for responsive and reusable UI.
Grid Lightbox Gallery EffectA grid lightbox gallery effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 76+, Edge 79+, Firefox 103+, Safari 13+Features
Dense Grid, Focus Trap
Orbital Photo GalleryA orbital photo gallery built with modern frontend techniques for responsive and reusable UI.
Difficulty
advancedFeatures
3D transformations, inertia scrolling, click-to-zoomResponsive
Yes- Squircles Gallery with View-Transition
A squircles gallery with view-transition built with modern frontend techniques for responsive and reusable UI.
Features
SVG Masking, CSS Grid, View Transitions, Squircle shapesResponsive
Yes 
Draggable 3D Cube with Dynamic LightingA draggable 3d cube with dynamic lighting built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 90+, Edge 90+, Safari 14+, Firefox 88+Features
Simulated Lighting, 3D Transforms, Inertia Dragging, Procedural GeometryResponsive
Yes
GSAP Homepage Demo 4A gsap homepage demo 4 built with modern frontend techniques for responsive and reusable UI.
Technologies
GSAPDifficulty
AdvancedFeatures
Interactive Gallery, Timeline Animations, 3D Transforms
Interactive 3D Coverflow GalleryA interactive 3d coverflow gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Inverse Transform Zoom, Box Reflection, Dynamic DOM GenerationResponsive
Yes
Interactive 3D Flip Book GalleryA interactive 3d flip book gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+Features
3D Perspective, Page Turning, Stacked Layout, Auto-ClosureResponsive
Yes
Interactive 3D Photo CubeA interactive 3d photo cube built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 90+, Edge 90+, Safari 14+, Firefox 88+Features
Mouse Tracking, 3D Transforms, Parallax Effect, Procedural GenerationResponsive
Yes
Responsive Fluid Photo Gallery GridA responsive fluid photo gallery grid built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, Sass, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Fluid Grid, Lazy Loading, Smart ScalingResponsive
Yes
LUME Shiny 3D Image Grid (Webgl, Three.js)A lume shiny 3d image grid (webgl, three.js) built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, three.jsFeatures
3D Rendering, Interactive Lighting, Reflective ShadersResponsive
Yes
Tearing Paper Photo GalleryA tearing paper photo gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, BabelDifficulty
AdvancedBrowser support
Chrome 90+, Edge 90+, Safari 15+, Firefox 90+Features
Physics-based Tearing, Custom Shaders, Interactive Geometry, Procedural Texture GenerationResponsive
Yes
Draggable Image Track ParallaxA draggable image track parallax built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Drag and Drop, Internal Parallax, Web Animations API, Touch SupportResponsive
Yes
Mouse-Reactive Floating Image GalleryA mouse-reactive floating image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 36+, Edge 12+, Firefox 48+, Safari 9+Features
Mouse Tracking, Smooth Panning, Hover Reveal, Dynamic LayoutResponsive
Yes
Fullscreen View Transition GalleryA fullscreen view transition gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 111+, Edge 111+, Firefox 131+, Safari 18+Features
View Transitions, Image Zoom, OKLCH ColorsResponsive
Yes
Image Gallery with View Transitions API and Scroll-Driven AnimationsA image gallery with view transitions api and scroll-driven animations built with modern frontend techniques for responsive and reusable UI.
Technologies
View Transitions API, CSS Scroll-Driven Animations, HTML5 DialogDifficulty
advancedBrowser support
Requires modern browsers supporting the View Transitions API and CSS scroll-driven animations (primarily Chromium-based).Features
Smooth transitions, Native modal, Auto-scrolling carouselResponsive
Yes
Lightbox with View Transition APIA lightbox with view transition api built with modern frontend techniques for responsive and reusable UI.
Technologies
View Transition API, Web Components, HTML5 DialogDifficulty
IntermediateFeatures
Smooth Transitions, Accessible Modals, Native Browser API
Native Cross-Fade View Transition GalleryA native cross-fade view transition gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 111+, Edge 111+, Firefox 131+, Safari 18+Features
View Transitions, Cross-Fade, Event Delegation, Feature DetectionResponsive
Yes
Responsive Lightbox Gallery using View Transition APIA responsive lightbox gallery using view transition api built with modern frontend techniques for responsive and reusable UI.
Technologies
View Transition API, CSS Grid, JavaScriptDifficulty
IntermediateFeatures
Lightbox, Smooth Animations, Responsive GridResponsive
Yes
Smooth View Transition Grid CardsA smooth view transition grid cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 111+, Edge 111+, Firefox 128+, Safari 18+Features
View Transitions, Dynamic Grid, Fallback SupportResponsive
Yes
Infinite Scrolling with Image CardsA infinite scrolling with image cards built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, CSS Grid, Intersection Observer APIDifficulty
IntermediateFeatures
Infinite Scroll, Dynamic DOM Manipulation, API IntegrationResponsive
Yes
Intersection Observer ExampleA intersection observer example built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, CSS, HTMLDifficulty
IntermediateFeatures
Intersection Observer API, Horizontal Scrolling, Dynamic BackgroundsResponsive
Yes
Smooth 3D Scroll-Driven RevealA smooth 3d scroll-driven reveal built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, HTML, CSSDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11.1+Features
3D Transforms, Smooth Scroll, Intersection Observer, ParallaxResponsive
Yes
Cinematic Zoom Blur Image GalleryA cinematic zoom blur image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Shader Transitions, Mouse Tracking, Smooth Lerp, GPU RenderingResponsive
Yes
Shattering Image Gallery TransitionA shattering image gallery transition built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
WebGL Shaders, Instanced Rendering, Scroll Navigation, Mouse ParallaxResponsive
Yes
Twisted Wave GLSL Image GalleryA twisted wave glsl image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScript, GLSL, Three.jsDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
GLSL Shaders, Mouse-Hover Distortion, Scroll-Based Post-Processing, Locomotive ScrollResponsive
Yes