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)
- Gallery-to-Overlay Transition
- 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 GSAP
A flip grid size with gsap built with modern frontend techniques for responsive and reusable UI.
- Full Screen Image Reveal Effect
A full screen image reveal effect built with modern frontend techniques for responsive and reusable UI.
- Full Screen Scroll Slideshow with Sound FX
A full screen scroll slideshow with sound fx built with modern frontend techniques for responsive and reusable UI.
- Grid Items View with Flip Plugin
A 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°2
A 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 Hover
A liquid gallery with 3d image hover built with modern frontend techniques for responsive and reusable UI.
- Our Best Friends Gallery Zoom
A our best friends gallery zoom built with modern frontend techniques for responsive and reusable UI.
- Photo Gallery with a Comic Touch
A 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 Slider
A swiper center thumbnail slider built with modern frontend techniques for responsive and reusable UI.
- The 7 (+3) Modern Wonders of the World - Slide Gallery
A 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 Scroll
A vanilla js skew images on scroll built with modern frontend techniques for responsive and reusable UI.
- Image Gallery with GSAP Observer Plugin
A 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 Slider
A yet another slider built with modern frontend techniques for responsive and reusable UI.
- Let's Move! GSAP Infinite Horizontal Scroll
A let's move! gsap infinite horizontal scroll built with modern frontend techniques for responsive and reusable UI.
- Parallax Carousel with GSAP Observer
A 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 Gallery
A 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 Reveal
A 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 Carousel
A 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 Search
A responsive image grid with slider and search built with modern frontend techniques for responsive and reusable UI.
- Asymmetric SVG Mask Grid Gallery
A 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 Gallery
A invisible gallery built with modern frontend techniques for responsive and reusable UI.
- Atmospheric Split-View Gallery
A 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 Swapper
A 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 Carousel
A image carousel built with modern frontend techniques for responsive and reusable UI.
- Noisy Image Gallery Navigation with Custom JS
A noisy image gallery navigation with custom js built with modern frontend techniques for responsive and reusable UI.
- Interactive Card with Floating Lightbox Images
A interactive card with floating lightbox images built with modern frontend techniques for responsive and reusable UI.
- Tactile Long Press Image Grid
A 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 Effect
A animated portfolio with svg clippath hover effect built with modern frontend techniques for responsive and reusable UI.
- Grid Lightbox Gallery Effect
A 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 Gallery
A 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 Lighting
A 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 4
A 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 Gallery
A 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 Gallery
A 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 Cube
A 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 Grid
A 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 Gallery
A 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 Parallax
A 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 Gallery
A 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 Gallery
A 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 Animations
A 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 API
A 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 Gallery
A 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 API
A 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 Cards
A 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 Cards
A 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 Example
A 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 Reveal
A 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 Gallery
A 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 Transition
A 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 Gallery
A 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



















































