Simple 3D scrolling website with animations - full build + code in React Three Fiber, Next.js

It’s hard to work with text and buttons in 3D, the optimal solution is to display those elements as HTML tags, and then use the 3D scene for models, images and shaders. In this way we can combine the best of 3D graphics with HTML appropriate content. But how do we keep the content aligned as the user scrolls down? That’s the topic of this video. You’ll learn how to build a scrolling 2D-3D page, and then animate the content as it enters and exits the view. We’ll also cover manipulating the camera using the pointer/mouse and adding a fixed progress bar along the bottom. Let's go! #javascript #react #threejs #gsap #pragmattic 🔗 Resources End result: https://blog.pragmattic.dev/example/t... Code on GitHub: https://github.com/prag-matt-ic/pragm... React Three Fiber: https://r3f.docs.pmnd.rs/getting-star... GSAP ScrollTrigger: https://gsap.com/docs/v3/Plugins/Scro... 🔖 Chapters 00:00 Intro 1:27 HTML content 6:25 Animating HTML content 12:18 Progress bar 15:08 3D Canvas and environment 16:50 Pointer controlled camera 19:52 Scrolling 3D content 29:36 Animating spheres based on scroll position 36:08 Fixed content 37:14 Wrap up 🤝 Looking to collaborate? Email [email protected] to start a conversation