Build a single, persistent Three.js scene in Webflow and drive smooth, GSAP-powered page transitions with Barba.js.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

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.

Building Seamless 3D Transitions with Webflow, GSAP, and Three.js

1. Creating the models (Blender + Photoshop)