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.
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.
In Tutorials by Yuri Artiukh
Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.
In Playground by Manoela Ilic
Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse.
In Tutorials by Ion D. Filho
A tutorial on how to create a 3D building wave animation with three.js and TweenMax.
In Tutorials by Bruno Imbrizi
A tutorial on how to draw a large number of particles with Three.js and make them interactive.
In Playground by Jérémie Boulay
A set of five demos with animated WebGL lines created with the THREE.MeshLine library. Find out how to animate and build these lines to create your own animations.
In Playground by André Mattos
An exploration of an animated interactive landscape built with three.js.
In Tutorials by Ion D. Filho
A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold’s Dribbble shot “Holographic-Interactions”.
In Playground by Robin Delaporte
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
In Playground by Jack Rugile
An inspirational set of demos that explores particle animations in 3D space with three.js. This type of animations could be very suitable for page loaders.
In Playground by Louis Hoebregts
A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library.
In Playground by Yannis Yannakopoulos
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
In Playground by Louis Hoebregts
Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.
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.
In Tutorials by Lucas Bebber
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.
In Tutorials by Karim Maaloul
A tutorial that explores the basics of creating animated 3D scenes using Three.js.
In Playground by Lucas Bebber
Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios.