51 CSS Animations On Scroll That You Can Use

Scroll down any modern website and something happens. Elements fade in, cards slide from the sides, images scale up as they enter view.

These CSS animations on scroll examples used to require heavy JavaScript libraries. Not anymore.

The Scroll-Driven Animations API changed everything in 2023. Chrome, Edge, and Firefox now support scroll-triggered effects with pure CSS.

No dependencies. No performance issues. Just native browser power.

This guide covers working code for fade-ins, slide effects, parallax backgrounds, progress bars, and card flips. You’ll learn how ScrollTimeline and ViewTimeline work, which properties animate best, and how to build fallbacks for Safari.

Copy the code. Test it. Ship it.

What is CSS Animation on Scroll

CSS animation on scroll is a technique that triggers visual effects when users scroll through a webpage.

Elements fade, slide, scale, or transform based on their position relative to the viewport.

The browser watches scroll position and activates CSS keyframes when elements enter the visible area.

Before 2023, this required JavaScript libraries like GSAP or ScrollMagic.

Now the Scroll-Driven Animations API handles everything in pure CSS.

Chrome 115+, Edge 115+, and Firefox 110+ support this natively.

Examples Of CSS Animations On Scroll

Bind that Scroll to a Beat

See the Pen
Bind CSS keyframe animation to scroll by Chris Coyier (@chriscoyier)
on CodePen.

Page’s Little Reveal Party

Transitioning with Every Scroll

See the Pen
Scroll Transition by Amith Jayapraban (@amithjayapraban)
on CodePen.

Trigger Happy Animations (With a Touch of jQuery)

See the Pen
Scroll-Triggered Animations (jQuery) by Bramus (@bramus)
on CodePen.

Text Cascades Like Waterfalls

See the Pen
Cascading text effects w/ Splitting + ScrollOut ✍️🤓 by Jhey (@jh3y)
on CodePen.

ScrollMagic in its Pure Essence

See the Pen
ScrollMagic – Basic by Anushka Chauhan (@anushkachauhan)
on CodePen.

Skew Till You Can’t No More

See the Pen
Scroll Animation by Snafu Studio (@SnafuParadise)
on CodePen.

Halfway to Perfection

See the Pen
scrollHalf by elgatodealien (@elgatodealien)
on CodePen.

Crossroads of Animations

See the Pen
Crossing on scroll by Ofek Nakar (@OfekNakar)
on CodePen.

A Whole New Parallax World

See the Pen
Parallax Scrolling animations by Sonia Grant (@webwitch)
on CodePen.

Deck of Illusions

See the Pen
Image Deck Animation by sandeshsapkota (@sandeshsapkota)
on CodePen.

Righteous Scroll

See the Pen
Justified Scroll Animation by Yoav Kadosh (@ykadosh)
on CodePen.

Zoom, But Only When You’re Watching

See the Pen
Efficient Scroll Zoom by Chris Weissenberger (@CAWeissen)
on CodePen.

Pizza, But Animated

See the Pen
Pizza example (animated images) by Donovan Hutchinson (@donovanh)
on CodePen.

Timeline’s Slide n’ Glide

See the Pen
Physic Milestones Timeline – Date 11 (24 days of animation) by januaryofmine (@januaryofmine)
on CodePen.

Stories from the Scroll

See the Pen
Scroll Animation by Julia Undeutsch (@YuriDevAT)
on CodePen.

Icon that Jives with the Scroll

See the Pen
Animated-Scroll-Icon by Wilhelm Mitschev (@skalar)
on CodePen.

Smoother Than Your Average Scroll

See the Pen
Pure CSS Smooth Scrolling Effect No Javascript by Bousahla Mounir (@bousahla-mounir)
on CodePen.

Story Cards that Move with Time

See the Pen
Scrolling Story Cards by Mike England (@mengland)
on CodePen.

Animating with Each Scroll

See the Pen
Scroll Animation by Kostas Tepetes (@kostastepetes)
on CodePen.

Parallax, But Make it Fashion

See the Pen
On scroll parallax by Nadeesha Eranjan (@nadeeshae)
on CodePen.

Carousel’s Dreamy Dance

See the Pen
Vertical carousel with TweenMax.js by Danil Goncharenko (@Danil89)
on CodePen.

Content That Glows with Every Scroll

See the Pen
Content Animation With Scroll by Sanjit Sarkar (@sanjitbrwnsmith)
on CodePen.

Marquee Madness: Dance On Scroll

See the Pen
GSAP ScrollTrigger – Marquee Page Border by Ryan Mulligan (@hexagoncircle)
on CodePen.

Weekly Groove with CSS

See the Pen
scroll animation with CSS — week 32/52 by Mert Cukuren (@knyttneve)
on CodePen.

Unmasking the Scroll: SVG Text Edition

See the Pen
ScrollTrigger: SVG Text Mask by Tom Miller (@creativeocean)
on CodePen.

Fade, Slide, Amaze

See the Pen
CSS/JS Fadeout scroll animation by Elwin van den Hazel (@elwinvdhazel)
on CodePen.

Snap to the Groove with CSS

See the Pen
css scroll snap by Logan Liffick (@loganliffick)
on CodePen.

Hover and Shine: Image Gallery

See the Pen
Image Accordions – Date 9 (24 days of animation) by januaryofmine (@januaryofmine)
on CodePen.

Dive into Dynamic Scrolls

See the Pen
Scroll Animations by Jaymie Rosen (@jaymierosen)
on CodePen.

Unravel the Scroll Magic

See the Pen
Amazing Scroll by Mr Neo (@Mr_Neo)
on CodePen.

Tilt and Play: The Skew Game

See the Pen
Skew Scrolling Effect ▲ by Dronca Raul (@rauldronca)
on CodePen.

jQuery Spices up the CSS Scroll

See the Pen
CSS animation on scroll with jQuery by Anna Karlovskaya (@annakarlovskaya)
on CodePen.

Slicing Words with Every Scroll

See the Pen
Split-text effect with scroll based animation by Thiago (@thigs)
on CodePen.

Taking Steps with GSAP

See the Pen
GSAP On-Scroll Walking Cycle by Ksenia Kondrashova (@ksenia-k)
on CodePen.

Captivate with Smoove.js

See the Pen
smoove.js css3 scroll effects by Yifang Di (@diyifang)
on CodePen.

Paper Plane Dreams On Scroll

See the Pen
Banner animation on scroll (paper plane) by Yudiz Solutions Limited (@yudizsolutions)
on CodePen.

3D Scrolls That’ll Make You Blink Twice

See the Pen
3D CSS Scroll by Shaw (@shshaw)
on CodePen.

The Never-Ending GSAP Scroll Tale

See the Pen
GSAP Infinite Scroll Animation by Vishal (@Vishal4225)
on CodePen.

Artistry in Scroll: Draw as You Go

See the Pen
Scroll Drawing by Chris Coyier (@chriscoyier)
on CodePen.

Smooth Moves with JS

See the Pen
JS: Scroll Animation using Intersection Observer API by Saief Al Emon (@iamsaief)
on CodePen.

Making Words Pop on Scroll

See the Pen
trigger a css animation on scroll by MrJohnson (@mrjohnson)
on CodePen.

Tilt the World: One Page at a Time

See the Pen
Skewed One Page Scroll by Nikolay Talanov (@suez)
on CodePen.

Scroll with a Touch of Jquery

See the Pen
Scroll-animation Jquery by Deepak Saini (@Saini-deepak)
on CodePen.

Not Just Any Scroll… It’s Magical

See the Pen
Scroll animation by ankit (@celebstori)
on CodePen.

Scroll and Spin: An SVG Tale

See the Pen
Scroll Spinning SVG by Chris Coyier (@chriscoyier)
on CodePen.

Dive Deep with Parallax Scrolls

See the Pen
Parallax Scrolling Website by Kodplay (@kodplay)
on CodePen.

Fade. Rise. Scroll. Repeat.

See the Pen
CSS Animations on Scroll – Fade From Bottom up by SitePoint (@SitePoint)
on CodePen.

Gallery Slides: Now That’s Smooth

See the Pen
Slide-out Scrolling Gallery by Teegan Lincoln (@teeganlincoln)
on CodePen.

Floating Text and Wobbly Pics

See the Pen
Untitled by bellachen (@bellachen1010)
on CodePen.

Blossom Your Words with Each Scroll

See the Pen
Directionally blooming words 🎨 by Jhey (@jh3y)
on CodePen.

How Does the Scroll-Driven Animations API Work

The API links animation progress directly to scroll position instead of time.

Two timeline types control the behavior: ScrollTimeline tracks document or container scroll progress, while ViewTimeline tracks element visibility within the viewport.

What is the ScrollTimeline Interface

ScrollTimeline connects animations to a scrollable container’s scroll position.

Progress runs from 0% at the top to 100% at the bottom.

Use the scroll() function in CSS to create one:

animation-timeline: scroll(root block);

The first parameter sets the scroll container (root, nearest, or self).

Second parameter defines the axis (block or inline).

What is the ViewTimeline Interface

ViewTimeline triggers animations based on element visibility in the viewport.

Animation starts when the element enters and completes when it exits.

The view() function creates this timeline:

animation-timeline: view();
animation-range: entry 0% cover 50%;

Perfect for scroll effects like fade-ins, slide-ins, and progressive content reveals.

How Do Animation Ranges Control Scroll-Triggered Effects

Animation ranges define exactly when effects start and end during scroll.

Six range keywords available:

• entry – element entering viewport
• exit – element leaving viewport
• cover – full crossing from entry to exit
• contain – element fully visible period
• entry-crossing – crossing the entry edge
• exit-crossing – crossing the exit edge

Combine keywords with percentages for precise control:

animation-range: entry 25% exit 75%;

CSS Scroll Animation Examples

Working code snippets for the most common scroll-triggered effects.

Each example uses native CSS without JavaScript dependencies.

Fade-In Animation on Scroll

The simplest scroll animation.

Elements start transparent and become visible as they enter the viewport.

.fade-in {
animation: fadeIn linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

Works well for text blocks, images, and cards.

The animation-range: entry 0% entry 100% means the fade completes exactly when the element fully enters.

Slide-In Animation from Left or Right

Combines opacity with transform: translateX for horizontal movement.

.slide-left {
animation: slideFromLeft linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}

@keyframes slideFromLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

Change -100px to 100px for right-side entry.

Use translateY for vertical slide effects.

Scale Animation on Scroll

Elements grow from small to full size during scroll.

.scale-up {
animation: scaleUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}

@keyframes scaleUp {
from {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 1;
transform: scale(1);
}
}

Creates emphasis for hero images, feature sections, and call-to-action buttons.

Parallax Scrolling Effect with CSS

Parallax scrolling creates depth by moving background layers slower than foreground content.

.parallax-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

.parallax-bg {
position: absolute;
transform: translateZ(-1px) scale(2);
}

.parallax-content {
position: relative;
transform: translateZ(0);
}

The CSS perspective property creates the illusion of depth.

Lower translateZ values move elements slower during scroll.

Progress Bar Animation Linked to Scroll

A reading progress bar that fills based on scroll position.

.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: #3b82f6;
transform-origin: left;
animation: progressFill linear;
animation-timeline: scroll(root);
}

@keyframes progressFill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

Uses scroll(root) to track entire document scroll.

The scaleX transform performs better than animating width.

Sticky Header with Animation on Scroll

Combine sticky navigation with scroll-triggered style changes.

.header {
position: sticky;
top: 0;
animation: headerShrink linear both;
animation-timeline: scroll();
animation-range: 0px 200px;
}

@keyframes headerShrink {
from {
padding: 2rem;
background: transparent;
}
to {
padding: 0.5rem;
background: rgba(255,255,255,0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
}

Header shrinks and gains background after 200px scroll.

Text Reveal Animation on Scroll

Words or characters appear progressively as users scroll.

.text-reveal {
animation: revealText linear both;
animation-timeline: view();
animation-range: entry 0% cover 60%;
}

@keyframes revealText {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}

The clip-path property masks content, revealing it left-to-right during scroll.

Great for headlines, quotes, and text animations on landing pages.

Card Flip Animation on Scroll

Flip card effects triggered by scroll position.

.flip-card {
perspective: 1000px;
}

.flip-card-inner {
transform-style: preserve-3d;
animation: flipCard linear both;
animation-timeline: view();
animation-range: entry 20% cover 50%;
}

@keyframes flipCard {
from { transform: rotateY(180deg); }
to { transform: rotateY(0deg); }
}

Requires backface-visibility: hidden on front and back faces.

Which CSS Properties Work with Scroll-Driven Animations

Not all CSS properties animate smoothly with scroll timelines.

Best performance properties (GPU-accelerated):

• opacity
• transform (translate, scale, rotate)
• clip-path
• filter (blur, brightness, contrast)

Acceptable properties (may cause repaints):

• background-color
• background-position
• border-radius
• box-shadow

Avoid animating (triggers layout recalculation):

• width, height
• margin, padding
• top, left, right, bottom

Use will-change: transform, opacity to hint browser optimization.

How to Use animation-timeline in CSS

The animation-timeline property connects keyframe animations to scroll position instead of time.

What is the scroll() Function

Creates a ScrollTimeline tied to a scroll container.

animation-timeline: scroll();           /* nearest scrollable ancestor */
animation-timeline: scroll(root);       /* document viewport */
animation-timeline: scroll(self);       /* element itself */
animation-timeline: scroll(root inline); /* horizontal scroll */

What is the view() Function

Creates a ViewTimeline based on element visibility.

animation-timeline: view();             /* default block axis */
animation-timeline: view(inline);       /* horizontal visibility */
animation-timeline: view(block 50px);   /* with inset offset */

The optional inset parameter adjusts the viewport detection area.

How to Set animation-range Values

Define start and end points using keywords and percentages.

animation-range: entry;                    /* shorthand */
animation-range: entry 0% exit 100%;       /* full range */
animation-range: cover 20% cover 80%;      /* middle portion */
animation-range: contain 0% contain 100%;  /* while fully visible */

Percentages are relative to the range keyword, not scroll distance.

What is the Difference Between ScrollTimeline and ViewTimeline

Use ScrollTimeline for document-level effects, ViewTimeline for individual element animations.

Browser Support for CSS Scroll-Driven Animations

Native support as of January 2025:

• Chrome 115+ (July 2023) – full support
• Edge 115+ (July 2023) – full support
• Firefox 110+ (February 2023) – behind flag, full support from 122+
• Safari – no support yet, WebKit implementation in progress

Check cross-browser compatibility on Can I Use before production deployment.

Global support covers approximately 75% of users.

How to Add Fallback for Browsers Without Scroll Animation Support

Use @supports to detect scroll-driven animation support.

/* Base styles - always visible */
.animate-item {
opacity: 1;
transform: none;
}

/* Enhanced experience for supported browsers */
@supports (animation-timeline: view()) {
.animate-item {
animation: fadeSlide linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
}

JavaScript fallback using Intersection Observer API:

if (!CSS.supports('animation-timeline', 'view()')) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.2 });

document.querySelectorAll('.animate-item')
.forEach(el => observer.observe(el));
}

Progressive enhancement ensures all users see content.

Common Mistakes When Creating Scroll Animations

Performance killers:

• Animating layout properties (width, height, margin)
• Too many simultaneous scroll animations
• Missing will-change hints on complex transforms
• Heavy filter effects on large images

Accessibility issues:

• Ignoring prefers-reduced-motion preference
• Animations that block content visibility
• Effects causing vestibular discomfort

Always respect reduced motion settings for web accessibility:

@media (prefers-reduced-motion: reduce) {
.animate-item {
animation: none;
opacity: 1;
transform: none;
}
}

User experience problems:

• Animations too slow, making users wait
• Effects that fight scroll direction
• Distracting animations on critical content areas

Tools for Testing CSS Scroll Animations

Chrome DevTools offers the best debugging experience.

Open Animations panel (More tools → Animations) to inspect scroll timelines.

The Performance panel identifies animation jank and dropped frames.

Useful testing tools:

• Chrome DevTools Animations panel – visualize keyframe progress
• Performance panel – check for layout thrashing
• Rendering tab – enable Paint flashing to spot repaints
• Lighthouse – audit usability and performance impact

Test on real devices; scroll behavior differs significantly between trackpad, mouse wheel, and touch.

Use CodePen or local development for rapid iteration before production deployment.

FAQ on CSS Animations On Scroll Examples

How do I trigger CSS animation on scroll without JavaScript?

Use the Scroll-Driven Animations API with animation-timeline: view(). This native CSS feature links keyframe animations to scroll position. Chrome 115+, Edge 115+, and Firefox 122+ support it without any JavaScript code.

What is the difference between scroll() and view() in CSS?

The scroll() function tracks container scroll position from top to bottom. The view() function tracks element visibility within the viewport. Use scroll() for progress bars, view() for element reveal effects.

Which CSS properties perform best for scroll animations?

Transform and opacity perform best because they’re GPU-accelerated. Avoid animating width, height, margin, or padding. These trigger layout recalculations and cause janky scroll performance on complex pages.

Do CSS scroll animations work in Safari?

Safari doesn’t support the Scroll-Driven Animations API yet. WebKit implementation is in progress. Use @supports (animation-timeline: view()) for feature detection and Intersection Observer as a JavaScript fallback.

How do I make scroll animations accessible?

Respect the prefers-reduced-motion media query. Users with vestibular disorders can disable animations system-wide. Set animation: none within this media query to show static content instead.

Can I control when scroll animation starts and ends?

Yes. The animation-range property defines exact start and end points. Use keywords like entry, exit, cover, or contain with percentages. Example: animation-range: entry 20% cover 80% for precise timing.

What is animation-timeline in CSS?

The animation-timeline property connects CSS keyframe animations to scroll progress instead of time. It accepts scroll() or view() functions. This replaced the need for scroll event listeners and Ajax requests.

How do I create a parallax effect with pure CSS?

Use CSS animated backgrounds with perspective and translateZ. Elements with negative translateZ values move slower during scroll. No JavaScript libraries like ScrollMagic or GSAP required anymore.

Why are my scroll animations laggy?

Likely animating wrong properties. Stick to transform and opacity only. Add will-change: transform for complex effects. Check Chrome DevTools Performance panel for layout thrashing and excessive paint operations.

How do I add scroll animations to existing websites?

Add view() timeline to existing keyframe animations. Wrap enhanced styles in @supports blocks for progressive enhancement. Test responsive design breakpoints since scroll behavior differs between desktop and mobile.

Conclusion

These CSS animations on scroll examples prove you don’t need JavaScript libraries anymore. The Scroll-Driven Animations API handles fade-ins, slide effects, and viewport-triggered animations natively.

Start with simple opacity transitions. Then add transform properties for movement.

Use view() for element reveals and scroll() for document-level progress indicators. Keep animation ranges tight for snappy user interface feedback.

Always test with media queries for reduced motion preferences. Your scroll-triggered effects should enhance the experience, not block content.

Safari support is coming. Build with @supports feature detection now and your animations will work everywhere soon.

Pick one example from this guide. Implement it today. Watch your static pages come alive.