54 CSS Scroll Effects
This selection demonstrates how to create profound and engaging visual stories based on scrolling, using a minimal amount of code. The demos show how to combine features like mask-image and clip-path so that the scroll acts as a trigger for complex masking and geometry changes. Technically, the key is the isolation of effects in separate layers to maintain high scroll speed and prevent unnecessary layout recalculations.
Last updated:
Scroll-Driven Web Gears Animation
A complex technical example demonstrating how to ensure animation functionality even without CSS animation-timeline: scroll() support. The code first checks for support and, if absent, uses GSAP ScrollTrigger as a polyfill for scroll-driven animation.
Sticky Sidebar with CSS position: sticky
A pure CSS method to fix one block on the screen while its neighbor scrolls - a clear demonstration of how position: sticky works within a parent container.
Sliding Images Using Animation-timeline
This scroll-driven animation effect is built entirely with CSS Scroll-Driven Animations, using animation-timeline: scroll(). It smoothly translates and transforms elements based on scroll position, creating a dynamic and high-performance parallax effect without JavaScript.
Scroll-Driven Grid Animation with CSS-Doodle
A mesmerizing scroll-driven image grid powered by the cutting-edge animation-timeline: view() CSS property and the <css-doodle> web component.
Scroll-Driven Gooey Island
Check out this cutting-edge “sticky island” effect that dynamically squishes and transforms on scroll using CSS Scroll-Timeline. The core technical feature is creating the Gooey effect by combining filter: blur() and contrast() with absolute control linked to the scroll position.
CSS @container scroll-state() Faux PiP Video
A demonstration of the current use of @container style() and scroll-state() to create context-aware UI. The key feature: the video element’s styles and animations are entirely determined not by the viewport, but by the element’s position within its parent container.
CSS Sticky Progressive Blur on Scroll
A progressive blur on scroll effect is implemented, where a sticky element utilizes backdrop-filter: blur() to dynamically change its transparency and blur strength as content scrolls underneath, creating a modern UI “fade-out” effect.
Scroll Flip-Book
A demonstration of one of the oldest and most reliable tricks for a parallax effect: the background-attachment: fixed property makes the section backgrounds stay in place relative to the viewport while the sections themselves scroll, creating an illusion of motion.