Rock the Stage with a Smooth WebGL Shader Transformation on Scroll
By Fabienne Bielmann on
A handy setup to create a smooth scroll based GLSL animation using Three.js and GSAP.
smooth scrolling
Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders
By Luis Henrique Bizarro on
A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.
Horizontal Smooth Scroll Layouts
By Mary Lou on
Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.
Crafting a Scrollable and Draggable Parallax Slider
By Ruud Luijten on
A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.
Image Stack Intro Animation
By Mary Lou on
Two simple intro animations where an image stack moves to become a grid.
Scroll Animations for Image Grids
By Mary Lou on
Some ideas for scroll animations for image grids powered by Locomotive Scroll.
Thumbnail to Full Width Image Animation
By Mary Lou on
An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.
Case Study: Portfolio of Bruno Arizio
By Bruno Arizio and Luis Henrique Bizarro on
A look behind the scenes of Bruno Arizio's portfolio with insight into the design process and an in-depth technical breakdown of the WebGL implementation.
Scroll, Refraction and Shader Effects in Three.js and React
By Paul Henschel on
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.
Smooth Scrolling Image Effects
By Mary Lou on
A small set of ideas on animating images and other elements while smooth scrolling a page.
How to Add Smooth Scrolling with Inner Image Animations to a Web Page
By Mary Lou on
A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.