12 CSS scroll-snap Examples
CSS scroll-snap makes it easy to build precisely controlled scrolling interfaces. This collection showcases scroll-snap in action - perfect for sliders, image galleries, and step-by-step layouts - delivering fluid, user-friendly navigation without JavaScript.
Last updated:
Pure HTML/CSS Image Slideshow
A lightweight, fast gallery that operates without JS libraries, supporting keyboard navigation, mobile swipes, and deep linking to specific slides.
Page Indicator Animation
A full vertical slider with scroll-snap points. The navigation indicator is dynamically animated using the Intersection Observer API, which tracks when a slide enters the viewport.
Infinite Scrolling Cards with GSAP and ScrollTrigger
A demonstration of an advanced GSAP technique for an infinite carousel, where the animation of each element is cyclically repeated with precise staggering, creating the feeling of continuous 3D space.
Scroll-Snap Grid Navigation with Intersection Observer
See how the Intersection Observer powers the 2D grid navigation: the Scroll Snap logic handles mandatory cell binding, while a JS utility adds support for keyboard arrow navigation and responsive typography using cqi/dvh units.
Dinosaur Park Scroll Snap Reveal Demo
Impressive scroll-triggered element reveal implemented using the native Intersection Observer API and styling based on CSS Custom Properties for cascading animations.
CSS-Only Testimonials Using Scroll Snap
A powerful demonstration of building a full-featured carousel entirely with CSS, leveraging experimental ::scroll-button, ::scroll-marker, and position-anchor for navigation, indicators, and positional layout without any JavaScript.
![thumbnail: CSS-Only Carousel using ::scroll-* Pseudo-Elements [Demo 2]](https://calendarstemplates.com/img/2025/_hua444b2c3cfa60ac2f0ca28472ff0b1cd_299454_e33b205cfb7b5df1b8206c9fd059de97.webp)
CSS-Only Carousel using ::scroll-* Pseudo-Elements [Demo 2]
A showcase of the newest CSS capabilities for component building: a complete carousel where navigation buttons (::scroll-button) and marker dots (::scroll-marker) are automatically generated and styled, and the initial item is set via scroll-initial-target.
Popover Drawer UI
A demonstration of an adaptive drawer UI, driven entirely by modern CSS features like scroll-snap and animation-timeline: scroll(), with a close mechanism based on scrollsnapchange. It also includes VisualViewport handling logic for proper iOS behavior.
