Learn React Three Fiber + GSAP: Create Stunning 3D Animations for the Web

Code (Give it a ⭐️ if you think it is helpful): https://github.com/Thabish-Kader/r3f-... Live Demo : https://r3f-scroll-three.vercel.app/ Buy me a Coffee: https://www.buymeacoffee.com/takdevelopr In this video we will be diving into the world of 3D web animation using React Three Fiber and GSAP. With the power of these two libraries combined, we will create a stunning 3D animated website that reacts to user scrolling. Along the way, we will explore some of the fundamental concepts of 3D web animation, including camera placement, lighting, and material properties. By the end of this tutorial, you will have a solid understanding of how to create visually stunning 3D animations that bring your websites to life. 0:00 demo 00:40 intial config 07:38 importing the model 12:00 typedefinitions 13:00 bringing the model to the canvas 18:11 camera positions 21:00 lighting and environment 26:30 importing gsap 28:30 creating sections/components 34:10 gsap animations 35:55 gsap Scroll trigger 40:30 explaining scroll trigger 47:55 explaining how i got the position values 59:48 explaining how scroll trigger works again !!! 01:01:31 Final project after stylings