26 CSS Scroll Effect Examples
Scroll effects are one of the most impactful ways to add life to a page. These 26 examples cover everything from simple CSS-only reveals to fully animated scroll-driven experiences with GSAP.
The Complete Web Developer in 2026
40 hours of video
401+ lessons
10 projects
🎉 Code FRIENDS10 for 10% off
Scrolling rainbow
A colorful abstract shape drawn with simplex noise and GSAP that morphs and shifts hues as you scroll down the page.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
simplex-noise.js
GSAP
View Code and Demo
Scroll image reveal animation
Pure CSS image reveal triggered by the scroll position using the native view-timeline property. No JavaScript required, but needs a browser that supports scroll-driven animations.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Content reveal on scroll
Text and images that fade and slide into view as you scroll, built entirely with CSS scroll-driven animations. No Intersection Observer, no JavaScript.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Pastries
A sample bakery landing page built with GSAP ScrollTrigger. Each section has its own entrance animation: scaling, fading, and staggering elements as they enter the viewport.
Made with:
HTML
CSS
JavaScript
Dependencies:
TypeScript
GSAP
SCSS
View Code and Demo
Scroll animations with GSAP
Neon glowing text that animates stroke by stroke as you scroll, powered by GSAP ScrollTrigger and SVG path animations.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
SCSS
View Code and Demo
Depth scrolling
Sections that create a sense of depth using CSS perspective and translate3d, with color palette transitions between each panel as you scroll.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
CSS scroll-driven text
Text that progressively reveals itself as you scroll, driven entirely by CSS scroll-timeline. Each word lights up in sequence without a single line of JavaScript.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Sticky bento on scroll
A bento grid layout where cards stick and animate into position as you scroll past each section, using only CSS position sticky and scroll-driven animations.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Box scroll effect
Full-screen sections that rotate and fold in 3D as you scroll between them, built with GSAP and CSS perspective transforms for a cinematic page transition feel.
Made with:
HTML
CSS
JavaScript
Dependencies:
Pug
SCSS
JQuery
GSAP
View Code and Demo
Scroll animation with images
A multi-section layout where each image enters with its own scroll-triggered effect. Some scale in, others slide or clip, creating a varied and dynamic reading experience.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
View Code and Demo
3D CSS Scroll
Black and white div elements arranged in a grid that tilt and rotate in 3D as you scroll, using the CSS perspective property with no JavaScript.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Skew scrolling effect
Page content that skews on the Y axis while scrolling and snaps back to normal when you stop, using CSS transform and a small JavaScript scroll velocity tracker.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
View Code and Demo
Overlapping sections effect
Full-width images that stack on top of each other using position sticky, creating a layered reveal as you scroll through the page.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Banner scroll effect
A CSS-only banner where text and images move at different speeds as you scroll, creating a parallax depth effect without any JavaScript.
Made with:
HTML
CSS
Dependencies:
SCSS
View Code and Demo
Scrolling 3D effect
Section transitions that flip and rotate in 3D space as you scroll, giving the page a physical card-turning feel between content panels.
Made with:
HTML
CSS
JavaScript
Dependencies:
Pug
Sass
View Code and Demo
Scroll triggered highlights
Text that highlights word by word as it enters the viewport, using the CSS Highlight API and scroll-driven animations. Currently Chrome-only.
Made with:
HTML
CSS
JavaScript
Dependencies:
None
View Code and Demo
Dual color text scroll effect
Two sections share the same heading but in different colors. As you scroll between them, the text clips against the section boundary creating a split-color effect.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Double image scroll effect
Two layered images where scrolling shifts the background-position of one, producing a text-cutting reveal as the images slide past each other.
Made with:
HTML
CSS
JavaScript
Dependencies:
SCSS
View Code and Demo
Pure CSS horizontal parallax gallery
A horizontal image gallery where each photo moves at a different parallax speed on scroll and responds to mouse position. Built entirely with CSS, no JavaScript.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
3D Scrolling image gallery
An image gallery that rotates and flows through a 3D carousel as you scroll, animated with GSAP for smooth and precise control over each frame.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Scroll with light
Dark background text where a spotlight follows the scroll position, illuminating only the words currently in the reading area. Pure CSS using scroll-driven animations.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Humane inspired CSS scroll-driven animation landing page
A landing page recreation inspired by the Humane website, with product elements that scale, fade, and reposition as you scroll through each section using GSAP.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
CSS scroll driven micro interaction
A site header that transforms as you scroll, collapsing, changing opacity, and rearranging elements using GSAP ScrollTrigger for a polished navigation micro interaction.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
Scroll driven cross fades
Two images that crossfade into each other as you scroll, with the transition tied directly to scroll progress via GSAP for a smooth, controllable blend.
Made with:
HTML
CSS
JavaScript
Dependencies:
GSAP
View Code and Demo
CSS scroll-driven scroll-snapping animations
A CSS-only slider that snaps between panels and animates each slide entrance using scroll-driven animations and scroll-snap. No JavaScript at all.
Made with:
HTML
CSS
Dependencies:
None
View Code and Demo
Backdrop-filter + SVG filter scroll effect
A scroll effect that combines CSS backdrop-filter with an SVG turbulence filter, creating a distortion wave that ripples across the background as you scroll.
Made with:
HTML
CSS
Dependencies:
Pug
Sass
View Code and Demo
Looking for more CSS inspiration? Browse our full collection of CSS examples.