Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js
Learn how to use Three.js to blend two scenes with a fluid simulation, creating a smooth, dynamic reveal effect.
Tutorials
In this section, you will find a variety of in-depth articles written by skilled front-end developers that cover a range of web development and web design techniques.
Building Seamless 3D Transitions with Webflow, GSAP, and Three.js
by Mael Ruffini
Build a single, persistent Three.js scene in Webflow and drive smooth, GSAP-powered page transitions with Barba.js.
SVG Mask Transitions on Scroll with GSAP and ScrollTrigger
In this tutorial, we’ll create four scroll-driven transitions that reveal fullscreen images using SVG masks, GSAP, and grid- and blind-based patterns.
Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds
A tutorial on building a scroll-driven WebGL gallery in Three.js with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity.
Sticky Grid Scroll: Building a Scroll-Driven Animated Grid
Learn how to build a structured scroll-driven image grid where movement unfolds progressively within a sticky layout.
Building Async Page Transitions in Vanilla JavaScript
by Valentin Mor
Learn how to build a lightweight SPA router with true async crossfade page transitions using Vanilla JavaScript, GSAP, and Vite — no framework required.
From Flat to Spatial: Creating a 3D Product Grid with React Three Fiber
A practical walkthrough of building a curved 3D product grid with React Three Fiber and GLSL, covering shaders, animation, and performance.
Creating a Smooth Horizontal Parallax Gallery: From DOM to WebGL
by David Faure
Build a smooth horizontal parallax gallery in DOM/CSS/JS, then upgrade it to GPU-powered WebGL (Three.js) with shaders.
Reactive Depth: Building a Scroll-Driven 3D Image Tube with React Three Fiber
by Matis Dené
Build a scroll-driven, infinitely looping 3D image tube in React Three Fiber powered by shaders, inertia, and a unified motion system.
Building an Endless Procedural Snake with Three.js and WebGL
by Sujen Phea
A deep dive into building a GPU-enhanced procedural curve system in Three.js, where organic motion emerges from simple steering rules and endless Bézier paths.
Building a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js
Learn how to build a multi-page WebGL image gallery with scroll-triggered shader reveals, smooth scrolling, and seamless page transitions using GSAP, Three.js, Astro, and Barba.js.
WebGPU Gommage Effect: Dissolving MSDF Text into Dust and Petals with Three.js & TSL
Build a Three.js WebGPU scene where MSDF text dissolves with a noise-driven TSL shader while synchronized dust and spinning petal particles burst out, finished with selective bloom using MRT.
Animating Responsive Grid Layout Transitions with GSAP Flip
We’ll explore how to use GSAP’s Flip plugin to animate dynamic grid layout changes, showing how grid items can resize and rearrange fluidly.
Building a Scroll-Driven Dual-Wave Text Animation with GSAP
Learn how to create smooth, opposing wave text animations across dual columns with scroll-driven sine wave mathematics and synchronized image updates.
Infinite Canvas: Building a Seamless, Pan-Anywhere Image Space
Learn how to build an infinite, pannable image canvas with React Three Fiber. We’ll use chunk-based rendering and performance-first techniques to create a smooth, endlessly explorable image space.
How to Create a Pixel-to-Voxel Video Drop Effect with Three.js and Rapier
A tutorial showing how video pixels are voxelized in 3D and dropped into a physics-driven world using Three.js, shaders, and Rapier.
How to Create Interactive and Animated WordPress Websites in 2026 And Why It Matters
by Droip
The new standard for WordPress design is interactive, animated, and intentional.
Building Responsive, Scroll-Triggered Curved Path Animations with GSAP
Smooth curved animations look simple, but building them responsively takes careful control. This tutorial shows how to approach it in practice.