Build React 3D Animation Website | ThreeJS (WebGi), GSAP

In this tutorial I'm gonna show you how to build a 3D animation in React, using technologies such as WebGi (powered by Three.js) and GSAP. We are gonna learn how to find 3D models and display them on your website using WebGi. Then we are going to use React and GSAP to make a 3D animation of that model. We are also gonna learn how to optimize 3D animations in React for mobile devices. And at the end, we are gonna build this website for production and upload. 👉 Final website: https://sloba-3d-animation-iphone.netlify.app/ 👉 Starter project: https://github.com/bobangajicsm/iphone-3d-website-starter 👉 For full source code check https://patreon.com/CodewithSloba or if this video reaches 1000 likes, I'll be releasing the source code on my GitHub 👉 Webgi SDK https://webgi.xyz/docs/index.html 👉 3D model credit Reaper3D: https://sketchfab.com/3d-models/iphone-13-pro-max-4f92b60d824a42c89bbf1833374c4f73 👉 Upload to https://www.netlify.com/ ************************************************************ 🧿 Chapters: 0:00 Intro 1:15 Project setup 7:00 Building website navigation 14:50 Building jumbotron 21:30 Building sound section 29:15 Building display section 33:15 How to find and load 3D models 36:43 Building WebGi viewer component 53:05 Animating 3D model with GSAP scroll animation 1:13:30 Implementing 3D model preview mode 1:32:15 Optimizing 3D animation for mobile phones 1:43:19 Building production-ready website and uploading 1:44:55 Outro ************************************************************ 🧿 I discussed: ✔️ How to find 3D models for your website ✔️ How to modify 3D models in WebGi SDK ✔️ How to display 3D models on your website with WebGi (Three.js) ✔️ How to make 3D animation on your React website ✔️ How to optimize 3D animation for mobile devices ✔️ How to deploy your final website ************************************************************ 👉 Join and become a better developer: ✔️https://codewithsloba.com 👉 Linkedin: ✔️ https://www.linkedin.com/in/slobodan-gajic/ 👉 Instagram: ✔️https://www.instagram.com/codewithsloba/