10+ CSS scroll-snap Examples

This date and time wheel selector leverages the cutting-edge CSS Scroll Snap Events API to build an efficient mobile-style picker. By registering event listeners for scrollsnapchanging and scrollsnapchange, the layout dynamically updates the select state in real time as the wheels rotate. It uses native CSS scroll-start-target-block to set initial positions, offering a smooth, lightweight solution.

An experimental custom select dropdown menu built on native HTML5 base-select specifications. The picker popover displays options in a vertically scroll-snapped viewport that fades and blurs adjacent values based on scroll proximity. A lightweight GSAP scrolling script automatically centers and aligns selected items in real time, while modern @starting-style manages discrete popover overlay entry transitions. (Requires: gsap.js, tweakpane.js)

This is a Scroll-Driven View Transitions component. It simulates app-like, full-screen transitions between content sections using only native CSS properties. Its function is to replace traditional vertical scrolling with a more engaging, cinematic experience, where each scroll action triggers a complex animation (like a “melt”, slide, or zoom) rather than a simple positional change.

This Adaptive Thumbnail Carousel is a versatile gallery component that seamlessly bridges the gap between desktop and mobile UX. On desktop, it presents a traditional filmstrip of thumbnails. On mobile, it intelligently morphs into a dot-navigation style, where hovering (or tapping) a dot reveals a floating preview of the image. The carousel handles state synchronization, smooth scrolling, and accessibility, making it a robust choice for e-commerce product pages or portfolios.

A lightweight, fast gallery that operates without JS libraries, supporting keyboard navigation, mobile swipes, and deep linking to specific slides.

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.

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.

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.

Impressive scroll-triggered element reveal implemented using the native Intersection Observer API and styling based on CSS Custom Properties for cascading animations.

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.

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.

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.