A comprehensive tutorial on building a gallery-style website in Webflow with a persistent Three.js 3D scene, GSAP-powered page transitions, and Barba.js navigation. Covers the full workflow: creating hand-drawn style 3D models in Blender, setting up Vite for Webflow custom code, structuring Barba containers and data attributes, building a singleton Three.js Experience class, implementing mouse-reactive models, animating camera position between pages, using SplitText for staggered text transitions, and handling accessibility with prefers-reduced-motion and responsive canvas sizing via ResizeObserver.
Table of contents
1. Creating the models (Blender + Photoshop)2. Project setup3. Webflow markup4. Three.js Experience5. The 3D world6. Mouse interaction7. Barba integration8. GSAP page transitions9. Button hover effects10. RefinementFinal resultWhat’s next6.2K Impressions