Mael Ruffini's Webflow 3D Page Transitions Create Seamless Spatial Navigation

Creative developer Mael Ruffini has published a tutorial on Codrops demonstrating Webflow 3D page transitions that maintain a persistent Three.js canvas across navigations. Using Barba.js, GSAP, and Three.js, the technique keeps the 3D renderer alive while the camera slides along the X-axis between 3D models when users click pages. The scene, modeled in Blender, includes a pen, a ceramic cup, and a Suzanne head, each with hand-drawn UV maps in Photoshop and a paper texture applied in multiply mode for a hand-made aesthetic. The build system uses Vite, SplitText from GSAP for animated typography, and custom shaders for organic materials. Ruffini, founder of Rhumb Studio, provides full code and a live demo. The approach offers spatial continuity for Webflow projects, pushing beyond default capabilities.