Scroll-snap

12 snippets

Browse scroll-snap examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-scroll-snap

Snippets(12)

Infinite Scrolling Cards with GSAP and ScrollTrigger
A infinite scrolling cards with gsap and scrolltrigger built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
Scroll Snap Ruler Picker
A scroll snap ruler picker built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Adaptive Thumbnail Carousel
A adaptive thumbnail carousel built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 69+, Edge 79+, Firefox 63+, Safari 13.1+
Features
Responsive Design, Scroll Snapping, Keyboard Navigation, Thumbnail Preview
CSS-Only Carousel using ::scroll-* Pseudo-Elements [Demo 2]
A css-only carousel using ::scroll-* pseudo-elements [demo 2] built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
CSS-Only Testimonials Using Scroll Snap
A css-only testimonials using scroll snap built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Trip Overview Carousel with Scroll-State Queries
A trip overview carousel with scroll-state queries built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Scroll-Driven View Transitions
A scroll-driven view transitions built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 115+, Edge 115+
Features
Scroll Timeline, Scroll Snap, View Transitions, Pure CSS
Responsive
Yes
Pure HTML/CSS Image Slideshow
A pure html/css image slideshow built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
Keyboard navigation, Mobile swipe support, Deep linking
Responsive
Yes
Popover Drawer UI
A popover drawer ui built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Difficulty
intermediate
Features
scroll-snap, popover-api, scroll-driven-animations, ios-optimized
Responsive
Yes
Dinosaur Park Scroll Snap Reveal Demo
A dinosaur park scroll snap reveal demo built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
JavaScript, CSS3
Difficulty
intermediate
Features
Scroll Snapping, Intersection Observer, Cascading Animations
Responsive
Yes
Page Indicator Animation
A page indicator animation built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
Intersection Observer API, CSS Scroll Snap
Difficulty
intermediate
Features
Vertical Navigation, Active State Tracking, Smooth Animations
Responsive
Yes
Scroll-Snap Grid Navigation with Intersection Observer
A scroll-snap grid navigation with intersection observer built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
Intersection Observer API, CSS Scroll Snap, Container Queries
Difficulty
intermediate
Features
Keyboard Navigation, Snap-to-grid, Responsive Typography
Responsive
Yes

Snippets(12)

related hubs