46 JavaScript Scroll Effects
Take user experience to the next level with JavaScript scroll effects. This collection includes parallax scrolling, reveal-on-scroll animations, sticky elements, scroll-based transitions, and more. Ideal for storytelling websites, landing pages, and dynamic interfaces that respond beautifully to user navigation.
Last updated:
GSAP ScrollSmoother and Three.js
An immersive scrolling experience blending smooth typography with a floating 3D particle field powered by Three.js. GSAP orchestrates the camera movement and dynamic text highlighting, creating a synchronized parallax journey.
Scroll UI Animation
As you scroll down, a large image of a field shrinks and gets cropped by white blocks to focus attention, while a heading on the left counts up the percentage of water saved, changing color for emphasis. This creates the feel of a dynamic infographic.
Smooth Scrolling with GSAP ScrollSmoother
A premium smooth-scrolling interface orchestrated by GSAP’s ScrollSmoother plugin. The layout leverages CSS Grid for overlapping compositions, while declarative data-speed attributes drive distinct parallax velocities for text and imagery, creating a layered, depth-rich browsing experience.
Physics Milestones Timeline
An animated vertical timeline where historical event cards slide in from alternating sides as they enter the viewport upon scrolling.
CSS Scroll-Driven Content Wave
A fluid, tactile selection interface where elements “live” and react to scroll, creating a “fisheye” or lens effect.
Scroll-Driven Content Wave #2
A horizontal scroll interface featuring a “lens” effect powered by CSS Scroll-Driven Animations (animation-timeline: view(inline)).
Open Props Bento Grid
A modern, visually appealing content grid that smoothly assembles on scroll, adapting seamlessly to any screen size.
Inertial Scroll Gallery with 3D Transforms
A sophisticated scroll-hijacking gallery that emulates inertia using a virtual scroll container and requestAnimationFrame. JavaScript orchestrates complex 3D transforms - calculating rotation and translation based on intersection ratios - while the layout relies on a fixed CSS grid.
GSAP ScrollTrigger Parallax Effect
This demo is a masterclass in scroll-driven animation, where GSAP’s ScrollTrigger plugin choreographs multiple, layered effects. A fluid parallax effect is created by using scrub: 1 to tie the yPercent and rotation of decorative elements directly to the scrollbar. This is complemented by a sophisticated text reveal, where GSAP’s SplitText plugin animates characters into view with a staggered opacity and y tween, demonstrating a powerful and modular approach to building complex, interactive scrolling experiences.
Horizontal Scroll Section with GSAP and Locomotive Scroll
Experience a classic “pinned” horizontal scroll effect, where a vertical scroll action is converted into horizontal movement. GSAP’s pin: true property freezes the section in place, while a tween animates the x property of the inner container, creating a cinematic, side-scrolling gallery.
Sliding List with Scroll-Driven Animations
This demo uses a single scroll event listener to calculate the individual progress of each list item as it enters the viewport. The progress value is then passed to a CSS Custom Property, which drives a staggered transform: scale() and opacity animation for a fluid, app-like reveal effect.
Infinite Scrolling with Image Cards
This infinitely scrolling image grid employs an IntersectionObserver with baton-passing observation to dynamically load content from the Pixabay API, creating cards through DOM manipulation as the user scrolls. JavaScript manages the paginated requests while CSS Grid provides responsive layout adaptation, with custom properties enabling seamless dark/light theme switching and clip-path animations.
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.
Infinite Scrollable and Draggable WebGL Grid
This demo showcases advanced THREE.js implementation using coordinate wrapping and custom shaders to create a highly performant, infinitely scrollable and draggable WebGL grid with motion-based visual feedback.
Vanilla JS Skew Images on Scroll
A dynamic image skew effect in pure Vanilla JS, where the transformation angle directly depends on the page’s scroll velocity, providing unique and responsive visual feedback.
Animated Scroll-Triggered Timeline
A smooth vertical timeline featuring scroll-triggered element animation, implemented using efficient pure JavaScript DOM visibility tracking to enhance performance and content engagement.
CSS Glitchy Text Reveal with Splitting.js
A demonstration of per-character text manipulation using Splitting.js to create a striking CSS glitch animation, where each character receives a unique set of random custom properties for varied and dynamic text reveal effects.
Text Reveal (on Scroll) Effect
An elegant text reveal effect that uses the Intersection Observer API for lazy-loading animation upon entering the viewport and relies on GSAP to perform a smooth “wipe” using a scale transformation.
Dinosaur Park Scroll Snap Reveal Demo
Impressive scroll-triggered element reveal implemented using the native Intersection Observer API and styling based on CSS Custom Properties for cascading animations.
Efficient Image Scroll Zoom Effect
A demo of the scroll zoom effect via dynamic element visibility calculation and utilizing the Intersection Observer API for performance enhancement.
Pixelated Lazy Load for Images
Pure JavaScript and CSS demonstrate how to replace a heavily pixelated placeholder with a full-size image using the data-src attribute and switching the image-rendering styles.
Layout Explorations with GSAP, Flip, Lenis and ScrollTrigger N°2
An advanced gallery UX pattern where view switching (List/Grid) uses GSAP Flip for calculating and executing complex transitions, and the hover preview effect is controlled by precise mouse events with debounce logic.
Cinematic Glitch Slideshow
An interactive demo showcasing slide transitions via destructive digital effects. It uses WebGL shaders to create realistic VHS distortion, static, and pixelation.
Codepen Challenge: Article Details
This demo uses the JavaScript IntersectionObserver API to create a smart-scrolling navigation that appears on scroll and highlights the active section, all without performance-heavy event listeners.
Animated Continuous Sections with GSAP
A practical example of a full-page scroller built with GSAP, featuring an infinite loop via gsap.utils.wrap. The core animation uses nested containers for a split-reveal effect, while text comes alive with a staggered animation on individual characters thanks to SplitText.
Scroll-Based Reveal Animations with ScrollTrigger
Technically, this is an example of using GSAP for “in” and “out” element animations based on scroll position. The code effectively uses callback functions like onEnter, onEnterBack, and onLeave to manage element states, making them visible only when needed.
Wave and RGB Image Distortion with Shaders
See how vertex and fragment shaders in Three.js are used to create a “living image” effect that reacts to scrolling. The technical focus is on the deformation (uOffset) and RGB shift (uRGBShift) controlled via GSAP.
Infinite Horizontal Scroll with Progress Tracking
A fullscreen horizontal scroll with unique infinite loop logic based on dynamic content cloning, complemented by a progress indicator.
