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.
scroll
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.
Smooth Panel Scroll Effects
In Playground, by Manoela Ilic
An exploration of smooth panel scroll effects based on Margot Priolet’s website.
On-Scroll Animation and View Switch
In Playground, by Manoela Ilic
A layout with some scroll animations and a view switch where the content item images animate to a grid.
Fullscreen Scrolling Slideshow
In Playground, by Manoela Ilic
A fullscreen scroll-based slideshow with a content view powered by GreenSock’s Observer plugin.
