How to trigger a scroll animation in JavaScript?

Use IntersectionObserver: create an observer with a threshold (e.g., 0.1), observe your elements, and add a CSS class when they enter the viewport. It's the most performant method — no scroll listener needed.

How to create a CSS parallax effect?

The simplest method uses background-attachment: fixed on a background-image. For more controlled parallax, use transform: translateY() with a reduced coefficient based on scroll position (via JS or CSS scroll-timeline).

What is scroll-timeline in CSS?

scroll-timeline is a native CSS API that links an animation to the scroll position — no JavaScript needed. You set animation-timeline: scroll() and the animation progresses with the scroll. Supported by Chrome and Edge since 2024.

How to make a reading progress bar?

Listen to the scroll event, calculate the percentage: (scrollY / (document.height - window.height)) * 100, and apply it as the width of a bar fixed at the top. Or use CSS scroll-timeline for zero JavaScript.

Do scroll animations impact performance?

With IntersectionObserver: no, it's asynchronous. With a scroll listener: potentially yes — use passive: true and throttle/debounce. With CSS scroll-timeline: no, it's handled natively by the browser.

Scroll & Parallax | Effect.Labs

How to create immersive scroll experiences? These 64 scroll effects cover all modern patterns: parallax, progressive reveals, progress bars, sticky sections and native CSS scroll-driven animations. From subtle reveals to cinematic scrolling.

Scroll Basics

20 fundamental scroll and parallax effects.

First element

Appears rising up with a fade

Second element

Progressive animation on scroll

Third element

Uses animation-timeline: view()

Fourth element

Each element animates individually

Fifth element

All CSS, zero JavaScript

Scroll ↓

Fade Up

Elements that appear rising up with a progressive fade via animation-timeline: view().

CSSScrollFade

Scale In

The element progressively grows

Zoom effect

From scale(0.7) to scale(1)

Smooth appearance

Combines opacity and transform

Native CSS

No JavaScript required

Performance

Uses GPU-accelerated properties

Scroll ↓

Scale In

Elements that scale up from a smaller size with animation-timeline: view().

CSSScaleScroll

From the left

Slides in from the left side

From the right

Slides in from the right side

Alternating left

Creates a visual rhythm

Alternating right

Serpentine effect

Last left

Smooth native CSS animation

Last right

Zero JavaScript required

Scroll ↓

Slide In

Elements sliding in from left and right alternately via view().

CSSSlideScroll

PARALLAX

Back layer

The background moves more slowly

Front layer

The content moves at normal speed

Depth effect

Creates a 3D sensation

Scroll ↓

Parallax

Parallax effect where the background moves at a different speed via scroll(nearest).

CSSParallaxScroll

REVEAL

The text fills up based on scroll progress

Scroll ↓

Progress Reveal

Text that progressively fills with an animated gradient via scroll(nearest) and @property.

CSSProgressGradient

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Scroll ↓

Stagger Cards

Cards appearing in cascade with incremental animation-delay and view().

CSSStaggerCards

Scroll →

Horizontal Scroll

Horizontal scrolling with scroll-snap for smooth navigation between elements.

CSSHorizontalSnap

Design

Code

Performance

3D

Fast

Secure

Scroll ↓

Rotate In

Cards appearing with rotation and scale via view() and animation-delay.

CSSRotateStagger

Blur Reveal

Progressive focus effect

Cinematic Effect

From full blur to perfect clarity

Native CSS

Animation via view() without JavaScript

Scroll ↓

Blur Reveal

Progressive focus effect with blur(20px) animated to blur(0) via view().

CSSBlurReveal

Projects

Satisfaction

0/7

Support

Users

Scroll ↓

Counter Scroll

Animated counters that increment when they enter the container's view.

JSCounterScroll

Scroll-Driven Animation

Native CSS animation driven by scroll

Progressive reveal

The element appears as it enters the view

Entry range

animation-range: entry 0% entry 100%

Zero JavaScript

Everything is handled by CSS

GPU Performance

GPU-optimized animations

Scroll ↓

Scroll-Driven Fade

Native CSS animation driven by scroll with animation-timeline: view() and entry range.

CSSViewFade

View Timeline Scale

The element scales up based on its position in the view

Progressive scale

From scale(0.7) to scale(1) smoothly

Cover range

animation-range: entry 0% cover 50%

Pure CSS

No JavaScript dependency

Smooth

Continuous animation linked to scroll

Scroll ↓

View Timeline Scale

Elements that progressively scale up via animation-timeline: view() and cover range.

CSSScaleView

Progress Bar

The bar at the top tracks your scroll position in this container via animation-timeline: scroll(nearest).

Scroll ↓

Scroll Progress Bar

Sticky progress bar linked to the container scroll via scroll(nearest).

CSSProgressSticky

PARALLAX

Each layer moves at its own speed

Scroll ↓

Parallax Layers CSS

Layers moving at different speeds via scroll(nearest) for a depth effect.

CSSParallaxLayers

720-degree rotation linked to scroll

Scroll ↓

Rotate On Scroll

Element performing a 720-degree rotation linked to scroll via scroll(nearest).

CSSRotateScroll

Slide Left

Native CSS animation from the left with view()

Slide Right

Native CSS animation from the right with view()

Left again

Alternating pattern for dynamism

Right again

Each element animates individually

Second to last

animation-range: entry 0% cover 40%

Last

Zero JavaScript, optimal performance

Scroll ↓

Slide In CSS Native

Native CSS left/right slide with animation-timeline: view() and cover range.

CSSSlideNative

Blur to Clear

Progressive transition from blur to clarity

Cover Range

animation-range: entry 0% cover 50%

Cinematic

Pure CSS rack focus effect

Scroll ↓

Blur to Clear

Transition from blur(10px) to blur(0) for a cinematic effect via view().

CSSBlurView

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Scroll ↓

Stagger Reveal CSS

Item grid with incremental native CSS animation-delay and view() for a cascade effect.

CSSStaggerNative

Clip Path Reveal

Progressive reveal from left to right

Vertical Direction

Content reveals from top to bottom

Reverse Rise

Appearance from the bottom of the frame

Scroll ↓

Clip Path Reveal

Progressive reveal via clip-path: inset() animated by view() and cover range.

CSSClip-pathReveal

Scroll!

The color changes based on scroll progress

Scroll ↓

Color Change

Progressive color change (purple, pink, cyan, green) linked to scroll via scroll(nearest).

CSSColorScroll

Progress Bar

Scroll to see the bar fill up. Uses animation-timeline: scroll() to link the animation to the container scroll.

Scroll ↓

Progress Bar

Progress bar linked to scroll via animation-timeline: scroll(). Fills from 0% to 100% in pure CSS.

CSS Scroll Progress

First element

Appears sliding up from the bottom

Second element

Reveals on scroll with animation-timeline: view()

Third element

Each card animates individually

Fourth element

animation-range controls the timing

Fifth element

All CSS, zero JavaScript

Scroll ↓

Fade In Reveal

Elements that progressively appear via animation-timeline: view() and animation-range: entry.

CSS View Reveal

Parallax CSS

Each layer moves at a different speed

Scroll ↓

Parallax Layers

Parallax layers with different speeds, driven entirely by scroll() in native CSS.

CSS Parallax Layers

Design System

Appears with a zoom effect

User Experience

Scales from 0.7 to 1 on scroll

Responsive

animation-range: entry 0% entry 50%

Scroll ↓

Scale on Scroll

Cards that scale from 70% to 100% when entering the view via animation-timeline: view().

CSS Scale View

Color Shift

The background color changes on scroll

Scroll ↓

Color Shift

Background gradient that evolves through 5 color palettes while scrolling, via animation-timeline: scroll().

CSS Gradient Scroll

Animations

Word-by-word reveal on scroll

Driven

animation-timeline: view()

No JavaScript required

Scroll CSS

Native CSS only

Scroll ↓

Text Reveal

Words that slide up from the bottom and progressively reveal while scrolling with view().

CSS Text Reveal

720° across the full height

Scroll ↓

Rotate on Scroll

Geometric shape with 720-degree rotation linked to scroll. Borders rotate in the opposite direction.

CSS Rotate Scroll

From the left

Odd card → slides from left

From the right

Even card → slides from right

Alternating

nth-child(even) reverses the direction

Performant

Only transform + opacity

Native CSS

Zero JavaScript dependency

Scroll ↓

Slide In Cards

Cards that alternately slide in from left and right with view() and animation-range: entry.

CSS Slide View

Zoom in → sharp → zoom out

Scroll ↓

Zoom & Blur

Circle that zooms in and unblurs at the scroll center, then continues zooming and reblurs on exit.

CSS Zoom Blur

Card 1

Vertical scroll

Card 2

→ horizontal movement

Card 3

animation-timeline

Card 4

scroll(nearest)

Card 5

Pure CSS

Scroll ↓

Horizontal Scroll

Vertical scroll converted into horizontal card scrolling via animation-timeline: scroll().

CSS Horizontal Scroll

Chapter 1: Introduction

Welcome to this demonstration of a scroll-linked progress bar. The bar at the top of this container progresses based on your scroll position.

This effect uses the CSS property animation-timeline: scroll() which links a @keyframes animation directly to the container's scroll position.

Chapter 2: How It Works

The scroll-timeline property creates a named timeline on the scrollable container. The progress-bar animation then uses this timeline to animate the transform: scaleX() property.

The result is a smooth progress bar that accurately represents the percentage of content read, without any JavaScript.

Chapter 3: Applications

Ideal for blog posts, documentation pages, tutorials, or any long-form content where the user wants to visualize their reading progress.

Compatible with modern browsers supporting Scroll-Driven Animations (Chrome 115+, Edge 115+).

Chapter 4: Conclusion

Scroll-linked animations open new possibilities for user experience, all in pure CSS with no impact on JavaScript performance.

Scroll to see the effect

Progress Bar

Reading progress bar driven by animation-timeline: scroll(), zero JavaScript.

CSS scroll() Progress

Scroll to see the effect

Scroll Fade Gallery

Images that fade in and scale up on viewport entry via animation-timeline: view().

CSS view() Gallery

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Scroll vertically

Horizontal Scroll Section

Section scrolling horizontally during vertical scroll, pure CSS with scroll-timeline.

CSS scroll-timeline Horizontal

Layer 1 - Foundation

Layer 2 - Structure

Layer 3 - Design

Layer 4 - Polish

Layer 5 - Launch

Scroll to stack

Sticky Reveal Stack

Cards stacking and revealing one by one on scroll with view() timeline.

CSS view() Stack

Scroll-driven animations allow you to create immersive and performant experiences in pure CSS, without a single line of JavaScript. Each word is progressively revealed based on its position in the viewport. The animation-range property precisely controls when the animation starts and ends.

Scroll to reveal

Text Line Reveal

Each word progressively colorizes while scrolling via animation-range and view().

CSS animation-range Text

Effect.Labs

The premium effects library

Discover

A second block that also appears with a cinematic zoom.

Scroll to zoom

Zoom Into Content

Content starting zoomed out that scales to 100% on scroll, cinematic opening effect.

CSS view() Zoom

SCROLL TO ROTATE

Scroll to rotate

Rotation on Scroll

Element rotating proportionally to scroll position, dial/compass effect.

CSS scroll() Rotation

Scroll to draw

Path Drawing on Scroll

SVG path drawing itself via stroke-dashoffset animated by scroll, pure CSS.

CSS SVG scroll()

Scroll for parallax

Parallax Layers

Multi-layer parallax entirely controlled by scroll() timeline, no JS.

CSS scroll() Parallax

01 Slide One

02 Slide Two

03 Slide Three

04 Slide Four

05 Slide Five

Scroll between slides

Snap Gallery with Progress

Snap-scrolling gallery with progress bar and dots linked to scroll, pure CSS.

CSS scroll-snap Progress

Introduction

Scrollytelling is a narrative technique that uses page scrolling to guide the user through an immersive visual story.

Chapter 1

Scroll-triggered animations progressively reveal content, creating a natural reading rhythm that captivates attention.

Chapter 2

By combining parallax, transitions, and visual effects, each section becomes a scene in a larger narrative, transforming a simple website into a storytelling experience.

Chapter 3

The best scrollytelling examples balance aesthetics and functionality, guiding the user without overwhelming them with excessive effects.

Conclusion

Master these techniques to create memorable web experiences that tell your story with elegance and fluidity.

Scroll to explore

Progress Bar

Horizontal progress bar that fills proportionally to content scrolling.

CSS JavaScript UX

PARALLAX

Scroll to explore

Parallax Layers

Three visual layers move at different speeds to create an immersive depth effect.

CSS JavaScript Parallax

Design System

Build a solid foundation with reusable tokens, components, and patterns for perfect visual consistency.

Motion Design

Bring your interfaces to life with fluid, meaningful animations that guide the user's attention.

Micro-interactions

Small details make the difference. Every hover, click, and transition contributes to a memorable experience.

Accessibility

Inclusive design ensures every user can navigate and interact with your content without friction.

Performance

Optimize every animation to maintain 60fps and deliver a smooth experience on all devices.

Scroll to explore

Reveal on Scroll

Elements appear with a fade and vertical slide when they enter the visible area.

IntersectionObserver CSS Animation

01 Discovery

02 Exploration

03 Creation

04 Iteration

05 Delivery

Sticky Horizontal

Automatic horizontal scrolling simulating panel navigation, ideal for presenting steps or projects.

CSS Animation Auto-play

                Scrollytelling
                transforms
                scrolling
                into
                a
                narrative
                experience.
                Each
                scroll
                movement
                reveals
                a
                new
                chapter
                of
                your
                story.
                Words
                light
                up
                progressively,
                guiding
                the
                eye
                through
                the
                content.
                This
                technique
                creates
                a
                natural
                reading
                rhythm
                that
                captivates
                attention
                and
                reinforces
                the
                emotional
                impact
                of
                the
                message.
                Used
                by
                top
                publishers
                and
                creative
                agencies,
                this
                approach
                brings
                static
                text
                to
                life.
              

Scroll to explore

Text Highlight on Scroll

Each word progressively lights up as you scroll, creating a guided reading effect.

JavaScript CSS Typography

ZOOM

Scroll to explore

Zoom on Scroll

An element progressively grows with scrolling, going from a small object to a full-screen view.

JavaScript CSS Transform Scroll

Project Statistics

Users

Satisfaction

Downloads

Countries

Scroll to animate the counters

Performance

0fps

Smoothness

Score Lighthouse

Scroll to explore

Number Counter Scroll

Counters animate from zero to their target value proportionally to the scroll position.

JavaScript Animation Data

2019

Initial Concept

First project draft, user research, and product vision definition.

2020

Prototype & Testing

MVP development, user testing sessions, and rapid iterations.

2021

Beta Launch

Opening to first beta users, feedback collection, and improvements.

2022

Version 1.0

Official launch with all key features and a loyal user base.

2023

Global Expansion

International deployment, strategic partnerships, and exponential growth.

2024

Continuous Innovation

AI integration, new features, and long-term vision for the future.

Scroll to explore

Timeline Scroll

Interactive vertical timeline with a line that progressively draws and elements that appear on scroll.

JavaScript CSS Timeline

Frame 1 / 24

Scroll to explore

Image Sequence

Frame-by-frame animation simulation driven by scroll, similar to Apple product pages.

JavaScript CSS Sequence

Speed

Optimized loading time for an instant experience.

Modularity

Independent and infinitely reusable components.

Elegance

Polished interfaces with meticulous attention to detail.

Reliability

Stability and security for complete user trust.

Excellence

High standards and continuous improvement with every iteration.

Scroll to explore

Scroll Snap Sections

Full-height sections with magnetic snapping and side pagination indicator.

CSS Scroll Snap JavaScript Navigation

Sticky Scroll

8 advanced sticky scroll and parallax effects.

First Section

The image stays fixed while content scrolls. Ideal technique for presenting features.

Second Section

Each text section triggers a visual change in the sticky image.

Third Section

Smooth transitions guide the user through content seamlessly.

Fourth Section

A pattern used in interactive journalism and product websites.

Scroll ↓

Sticky Image Change

Sticky image that changes while content scrolls with panels revealed via view().

CSSStickyScroll

01 Design

02 Develop

03 Test

04 Deploy

05 Monitor

06 Iterate

Scroll →

Horizontal Scroll

Horizontal scrolling section with snap to navigate between workflow steps.

CSSHorizontalSticky

First Card

Second Card

Third Card

Fourth Card

Fifth Card

Scroll ↓

Card Stack

Cards that stack with position sticky and view() animation in the container.

CSSStackSticky

Step 1: Design

Define your vision and plan your project.

Step 2: Development

Transform your ideas into clean and efficient code.

Step 3: Testing

Ensure product quality and reliability.

Step 4: Launch

Deploy your project and celebrate your success.

Scroll ↓

Progress Reveal

Sticky progress bar with items progressively revealed via scroll(nearest) and view().

CSSProgressReveal

Modern Architecture

Well-designed scalable applications.

Microservices
API RESTful
Cloud Native

Optimal Performance

Optimize every aspect of your app.

Lazy Loading
Code Splitting
Caching

Enhanced Security

Protect your data and users.

2FA
E2E Encryption
Audits

Scroll ↓

Split Screen Sticky

Sticky visual with rotating SVG and content revealed by scroll via view() and scroll(nearest).

CSSSplitSticky

ZOOM

Progressive zoom linked to scroll

Scroll ↓

Zoom In Sticky

Element that progressively zooms from scale(1) to scale(2.2) via scroll(nearest).

CSSZoomScroll

Scroll ↓

Text Highlight Scroll

Words colored sequentially on scroll with JS scoped to the container.

JSTextHighlight

Parallax Layers

Each layer moves at a different speed

Scroll ↓

Layered Parallax

5 layers moving at different speeds via scroll(nearest) for a complete parallax effect.

CSSParallaxLayers

Scroll Snap

6 scroll snap effects for precise navigation.

Section 1

Scroll to move to the next one

Section 2

Scroll stops automatically

Section 3

Smooth and controlled experience

Section 4

Last section

Scroll ↓

Vertical Snap

Sections automatically snapping to start via scroll-snap-type: y mandatory.

CSSSnapVertical

Slide 1

Swipe horizontally

Slide 2

Intuitive navigation

Slide 3

Perfect for galleries

Slide 4

Mobile-optimized experience

Slide 5

Last slide

Scroll →

Horizontal Snap

Horizontal scrolling with automatic snapping via scroll-snap-type: x mandatory.

CSSSnapHorizontal

Project Alpha

Modern interface with smooth animations.

Design

Project Beta

High-performance progressive web app.

Dev

Project Gamma

Immersive e-commerce platform.

E-commerce

Project Delta

Real-time analytics dashboard.

Analytics

Project Epsilon

Cross-platform mobile application.

Mobile

Project Zeta

Content management system.

CMS

Scroll →

Card Snap Carousel

Card carousel aligning to center with scroll-snap-align: center.

CSSCarouselSnap

Main Section

Full height

Medium Section

Half-height

Medium Section

Half-height

Small

Compact

Final Section

Back to full height

Scroll ↓

Mixed Content Snap

Sections of different sizes with scroll-snap-type: y proximity for flexibility.

CSSMixedSnap

Step 1

Start your journey

Step 2

Progress underway

Step 3

Halfway there

Step 4

Almost done

Step 5

Mission accomplished!

Scroll ↓

Snap + Progress

Vertical snap with progress bar and indicator dots via JS scoped to the container.

JSSnapProgress

🚀

Launch

Start with style and elegance

💡

Innovation

Ideas that transform

🎯

Precision

Every detail matters

✨

Excellence

The perfect final result

Scroll ↓

Smooth Snap

Snap with animations triggered by IntersectionObserver scoped to the container.

JSSnapSmooth

Fundamentals

Design & Visuals

Animations & Scroll

Gallery & More

Scroll Basics

First element

Second element

Third element

Fourth element

Fifth element

Fade Up

Scale In

Zoom effect

Smooth appearance

Native CSS

Performance

Scale In

From the left

From the right

Alternating left

Alternating right

Last left

Last right

Slide In

Back layer

Front layer

Depth effect

Parallax

Progress Reveal

Stagger Cards

Horizontal Scroll

Design

Code

Performance

3D

Fast

Secure

Rotate In

Blur Reveal

Cinematic Effect

Native CSS

Blur Reveal

Counter Scroll

Scroll-Driven Animation

Progressive reveal

Entry range

Zero JavaScript

GPU Performance

Scroll-Driven Fade

View Timeline Scale

Progressive scale

Cover range

Pure CSS

Smooth

View Timeline Scale

Progress Bar

Scroll Progress Bar

Parallax Layers CSS

Rotate On Scroll

Slide Left

Slide Right

Left again

Right again

Second to last

Last

Slide In CSS Native

Blur to Clear

Cover Range

Cinematic

Blur to Clear

Stagger Reveal CSS

Clip Path Reveal

Vertical Direction

Reverse Rise

Clip Path Reveal

Color Change

Progress Bar

Progress Bar

First element

Second element