On-Scroll Animation Ideas for Sticky Sections
In Playground, by Manoela Ilic
Some ideas of how sticky sections can be animated while exiting the viewport.
scroll
201 posts
Experimental CSS-Only Carousels with Scroll-Driven Animations
In Playground, by Maxwell Barvian
Three carousel experiments made with CSS scroll-driven animations, based on Francesco Zagami’s designs.
A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()
In Tutorials, by Adam Argyle
With just CSS you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements and much more.
Experimental On-Scroll Text Animations with SVG Clip-Path
In Playground, by Manoela Ilic
Some experiments with on-scroll typography effects using SVG clip-paths.
On-Scroll Sliced Text Animation
In Playground, by Manoela Ilic
A scroll-triggered sliced text animation, where segmented elements reunite while scrolling.
On-Scroll Shape Morph Animations
In Playground, by Manoela Ilic
Scroll-driven shape morph animations with tilt interaction inspired by the effect seen on KPR.
Progressively Enhanced WebGL Lens Refraction
In Tutorials, by David Lindkvist
Learn how to create a responsive WebGL layout powered by CSS and React Three Fiber.
Connected Grid Layout Animation
In Playground, by Manoela Ilic
Some ideas for simple on-scroll animations on “connected” grid layouts.
On-Scroll Column & Row Animations
In Playground, by Manoela Ilic
Some inspiration for scroll-driven animations on column and row items.
On-Scroll Perspective Grid Animations
In Playground, by Manoela Ilic
On-scroll animations for perspective image grids with different layouts.
Scroll-Based Layout Animations
In Playground, by Manoela Ilic
An exploration of different scroll based layout switch animations using GSAP’s ScrollTrigger and Flip.
On-Scroll SVG Filter Effect
In Playground, by Manoela Ilic
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
On-Scroll Pixelated Image Loading Effect
In Playground, by Manoela Ilic
A recreation of the on-scroll pixelated image loading effect seen on Felicity Ingram’s website.
Some More On-Scroll Typography Animations
In Playground, by Manoela Ilic
A second set of ideas for on-scroll typography animations.
Animate a Camera Fly-through on Scroll Using Theatre.js and React Three Fiber
In Tutorials, by Andrew Prifer
This tutorial will show you how to animate a camera flying through a 3D scene as the user scrolls using Theatre.js and React Three Fiber.
On-Scroll Typography Animations
In Playground, by Manoela Ilic
Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.
Getting Creative with Infinite Loop Scrolling
In Tutorials, by Manoela Ilic
A quick look at how to recreate the infinite loop scrolling animation seen on Bureau DAM with GSAP and Lenis.
How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP
In Tutorials, by Ksenia Kondrashova
A tutorial on how to create a 3D cardboard box that folds and unfolds on scroll using Three.js and the GSAP ScrollTrigger.
