How to Create Responsive and SEO-friendly WebGL Text
In Tutorials, by Eemeli Haakana
Learn how to combine responsive HTML text with WebGL rendering, enabling scroll-driven animations and custom shader effects.
scroll
Elastic Grid Scroll: Creating Lag-Based Layout Animations with GSAP ScrollSmoother
In Tutorials, by Manoela Ilic
A scroll effect where each column of a grid moves at a slightly different speed, creating a soft, elastic feel as you scroll.
How to Create a WebGL Rotating Image Gallery using OGL and GLSL Shaders
In Tutorials, by Oluwaseyi Oluwadare
Learn how to create a progressive image rotation effect with WebGL, using OGL and GLSL shaders.
Consecutive Scroll Animations with One Element
In Playground, by Manoela Ilic
A simple concept of animating one element across different waypoints on scroll using GSAP Flip and ScrollTrigger.
How to Create an Organic Text Distortion Effect with Infinite Scrolling
In Tutorials, by Jorge Toloza
Learn how to create an organic distortion effect for text using JavaScript and CSS for a unique, fluid animation.
Staggered (3D) Grid Animations with Scroll-Triggered Effects
In Playground, by Manoela Ilic
A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.
Exploring Playful Context-Aware Animations for Fixed Elements
In Playground, by Manoela Ilic
Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations.
Exploration of On-Scroll Layout Formations
In Playground, by Manoela Ilic
An exploration of layout formations during scroll, where content is pinned until the layout is fully assembled.
Scroll-based SVG Filter Animations on Text
In Playground, by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js
In Tutorials, by Jan Kohlbach
Learn how to create distortion and grain effects on scroll using Three.js shaders, syncing HTML images with WebGL.
Progressive Blur Effect using WebGL with OGL and GLSL Shaders
In Tutorials, by Jorge Toloza
Learn how to create an interesting progressive blur effect using WebGL, OGL, and GLSL shaders.
Blurry Text Reveal on Scroll
In Playground, by Manoela Ilic
A blurry text reveal animation on scroll inspired by Rauno’s “Blur reveal”.
Some On-Scroll Text Highlight Animations
In Playground, by Manoela Ilic
Some ideas for scroll-based text highlight animations.
On-Scroll Expanding Image Animation within Typography
In Playground, by Manoela Ilic
An animation experiment where we expand an image within some typographic element on scroll.
On-Scroll 3D Stack Motion Effect
In Playground, by Manoela Ilic
An experimental 3D card stack animation on scroll.
Reflection Scroll Effect
In Playground, by Manoela Ilic
A decorative reflection effect where we simulate a reflected page and scroll it along with the content.
On-Scroll Revealing WebGL Images
In Playground, by Yuri Artiukh
An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber.
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.
