How to Unroll Images with Three.js
In Playground, by Yuri Artiukh
Discover the basic concept behind an unrolling image effect using WebGL.
scroll
3D Folding Layout Technique for HTML Elements
In Tutorials, by Daniel Velasquez
A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.
Case Study: Portfolio of Bruno Arizio
In Articles, by Bruno Arizio
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
In Tutorials, by Paul Henschel
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
In Playground, by Manoela Ilic
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
In Tutorials, by Manoela Ilic
A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.
How to Create Smooth WebGL Transitions on Scroll using Phenomenon
In Tutorials, by Colin van Eenige
A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.
Fullscreen Hover Loop Effect
In Playground, by Manoela Ilic
A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
Scrolling Letters Animation
In Playground, by Manoela Ilic
A switching title effect where a fixed text element changes with an animation depending on the scroll position.
Slice Revealer
In Playground, by Manoela Ilic
A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk’s transitions experiments.
On-Scroll Morphing Background Shapes
In Playground, by Manoela Ilic
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
WebGL Scroll Spiral
In Playground, by Xoihazard
A couple of decorative and inspirational WebGL background scroll effects for websites powered by regl. The idea is to twist some images and hexagonal grid patterns on scroll, creating an interesting effect.
Block Reveal Effects
In Playground, by Manoela Ilic
Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.
Animated Map Path for Interactive Storytelling
In Playground, by Lucas Bebber
An interactive journey where a Canvas map path is animated according to the content that is scrolled on the page.
Sticky Table Headers & Columns
A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.
On Scroll Effect Layout
In Blueprints, by Manoela Ilic
An on scroll effect template that animates the sides of sections once they are in the viewport.
On Scroll Header Effects
In Playground, by Manoela Ilic
Some inspiration for headers that animate when scrolling the page.
On-Scroll Animated Header
In Blueprints, by Manoela Ilic
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
