React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP

Learn how to build a 3D animation in React, using technologies such as WebGi (powered by Three.js) and GSAP. First, we will learn how to find 3D models and display them on your website using WebGi. Then, we'll use React and GSAP to make a 3D animation of that model. Next we'll learn how to optimize 3D animations in React for mobile devices. Finally, we'll build this website for production and upload.
✏️ Course created by @CodewithSloba
🔗 Final website: sloba-3d-animation-iphone.net...
🔗 Starter project: github.com/bobangajicsm/iphon...
🔗 For full source code check / codewithsloba
🔗 Webgi SDK webgi.xyz/docs/index.html
🔗 3D model credit Reaper3D: sketchfab.com/3d-models/iphon...
🔗 Upload to www.netlify.com/
⭐️ Chapters ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:01:27) Project setup
⌨️ (0:07:12) Building website navigation
⌨️ (0:15:02) Building jumbotron
⌨️ (0:21:42) Building sound section
⌨️ (0:29:27) Building display section
⌨️ (0:33:27) How to find and load 3D models
⌨️ (0:36:55) Building WebGi viewer component
⌨️ (0:53:17) Animating 3D model with GSAP scroll animation
⌨️ (1:13:42) Implementing 3D model preview mode
⌨️ (1:32:27) Optimizing 3D animation for mobile phones
⌨️ (1:43:31) Building production-ready website and uploading
⌨️ (1:45:07) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@juraijahmed1321]

Finally a video i can finish in one session that isn't a whole day

[@sguitas]

Yea, because the day have 24H and I'll take only 20 to finish it

[@totalgroomingstyle]

I am unable to render the black-scene.glb can you help me?

[@davidatuma9332]

Lazy 🌚

[@totalgroomingstyle]

@@davidatuma9332 I am able to render the iPhone but it is now in the bottom

[@nilankanpal4454]

​@@totalgroomingstyle yeah same here😅

[@AndrewsTutorialMix]

Great tutorial🎉😊

[@snoopyhassan]

one of the best tutorial

[@e3_prasanjeetsinha85]

Damnnn I wanted to learn gsap so badly finally it's here

[@mindbodyps]

Oh my god this is what I wanted from long time

[@moisesespiritosanto2195]

Hi, I'm from São Paulo! Yeah! Muito bom mesmo!!!

[@gofry3023]

Thank You🎉

[@AndersonMancini]

Great tutorial ;)

[@chokdeesam2365]

You are so humble my friend ! You teached me WEbGi, i will never forget :) Thank you

[@MuhammadYasirGhaffar]

Wont suggest wasting time on this tutorial. I have wasted whole day and 3d component is not loading correctly. load method is not being recognized and i wasted my time merely in creating navbar lol.

[@mesfinmulgeta6060]

❤love it🎉

[@pokitoons3667]

Still learning javascript but I will do this course after learning javascript react tailwind

[@andrew_mandrichuk]

Thanks for the tutorial!

[@alexanderkomanov4151]

Thanks a lot!

[@imranakhtar6254]

wonderful

[@HuyTran-qu8gv]

Amazing

[@user-wf6eq9og1o]

Beginning at 37:00

[@rohitaggarwal6457]

deployed successfully in a day. learnt some amazing concepts but the animation wasn't supporting mobile or tablets

[@Dibyendu_das_96]

great video

[@mattoattacko]

is anyone else's animations not working on their deployed site? The phone scroll animation works on local, but once I deploy it to Netlify the animation no longer works and the phone remains static on the right side of the page.

[@ayushpillai333]

😊Hope to see a tutorial same 3D in angular. 👌.

[@yoskokleng3658]

Could you make video vue js with threeJs ? I am waiting this tutorial for long time. :)))

[@jeremyleyden1]

quick question - the top nav disappears on mobile. is there a quick css fix for that?

[@daddyyyyyyyyyyyy]

What would be the prerequisites for this sir can a newbie start

[@MrZiyak99]

youll should do vids on gsap and threejs separately that would be awesome. also like threejs not webgi (I checked and looks like it's built on top of threejs and might be paid so not a fan)

[@sergejchap62]

Great FINE!

[@nuckles7014]

How did you import webgl on your webglViewer.jsx? He never stated it or even run any installation through the terminal🤦🏻‍♂️

[@user-pz8gm2xk7y]

Great job ,, if it possible to create some video in three js with react tailwind typescript

[@christianmuller6951]

In case anyone is having an issue with the Text in the jumbotron section being in conflict with the phone image, I believe the problem is a mistake(?) in the css for the jumbotron logo (line 211): The logo can't be seen, since it is black on black and it's width is set to 140px, which I am certain should be 14px, since that is its original width. Either way, to fix this: Remove the logo alltogether OR set the width to 14px (and possibly use a white logo).

[@rizekishimaro]

in me got stuck on the camera has being pushed to bottom

[@NealFrazierTech]

ya you need to make your own css

[@rizekishimaro]

@@NealFrazierTech thanks alot

[@philipedision-mq9xj]

Exactly,just like me

[@navanjanasasith6978]

I''m stucked at Building WebGi viewer component. Dev server going dark and not work for me. Please help me.

[@Olorunnishola_Olamilekan]

Please can you make a course on GSAP. There are barely any tutorials on it on youtube.

[@Speaks4itself]

I desperately looking for one

[@KaranSethia24]

I think Framer is more than enough for animations if you're using React

[@luffy84002]

the 3d phone model is appearing on different section instead on top of everything

[@kantimahantyrohit8761]

I am trying to animate the same thing using a laptop 3d model, but i want a to come over on laptop screen, like its inside the laptop. Is it possible to do that, please help. Thanks

[@binaakene7942]

Yessssssssss

[@himanshurajput3846]

Hello guyz, Kindly make videos on solaris 10 nd 11 full course.

[@startthegame9848]

why it showing WebGi Viewer instance initialized, version: 0.5.5, and my animation freezer when I changed window size is just poping to the position.

[@rishiraj2548]

Thanks

[@nuckles7014]

How did you import webgl on your webglViewer.jsx? He never stated it or even run any installation through the terminal🤦🏻‍♂️

[@evertonrocha7701]

I received a error when i tried to run "npm run dev": [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. I was really looking forward to doing this tutorial.

[@evertonrocha7701]

Sorry. I ranamed my App with JS extension. This corrrect is JSX.

[@mahadebd]

oh.. great tutorial...need asus frontend tutorial

[@nuckles7014]

How did you import webgl on your webglViewer.jsx? He never stated it or even run any installation through the terminal🤦🏻‍♂️

[@olivierbakoyogo1324]

6:09 the git can't run what should i do ?

[@Legacylanes_moto]

why do you use react and not a simple HTML page for this project? Complicates it more than its necessary.

[@humildehomem]

Thank you so much! 🍷🗿😎💎👍🏻

[@nuckles7014]

How did you import webgl on your webglViewer.jsx? He never stated it or even run any installation through the terminal🤦🏻‍♂️

[@nuckles7014]

How did you import webgl on your webglViewer.jsx? He never stated it or even run any installation through the terminal🤦🏻‍♂️

[@user-ls2ef1kh1r]

how to have a control on glb model

[@shashankashekharsharma1479]

I am new to three.js and I am having troubles following the lecture. Could not build the website navigation even though I followed the lecture word by word

[@usmanmarkaz]

Plz start react native tutorials

[@hanhtrangtvt227]

after add 2 glb file, i dont under stand that why viewer.scene.children return Object3D, but cant set position or camera for children element, i try rotate children[0] then it rotate all object in scene, how can I apply this action for only one children

[@atomauro]

i fk love you my man

[@moizkhalid2714]

Really informative video, just that it animation is not responsive completely on tablet and on different resolutions.

[@MarcelStancu]

After uploading to Netlify, site remains white. Not working...

[@bharath2508]

Can i put this on my portfolio?

[@arseniyyyyyyy]

Before watching this video, please note that the webgi sdk is in beta version and therefore unacceptable for production. Moreover, you can get the full code of the lesson only by a paid subscription. I would think a lot before watching this

[@RodasAPCTV]

to add onto this. this isn't a real tutorial, it's tacky and patched on. someone memorized instructions and replayed them on a recording, there's no added value for anything this person types, and there's few or maybe 0 sentences that will help you understand better what he's doing, actively hindering your ability to learn anything. if you're trying to copy the end product, by all means, but if you came here with any hope of bettering your understanding of the topic, this is NOT the video for that.

[@KaranSethia24]

I dont know how it has gone unnoticed but I dont think its a good practise to manipulate dom as the tutor has while making the Navbar, I may be wrong but I dont think I have ever used query selectors in a react project for this purpose because we must only use and manipulate virtual dom and not the real dom

[@kartikbhardwaj1085]

Yes because react uses virtual Dom concept and instead of directly accesing we have to pass ref using useref hook❤

[@ajaedward2829]

I tried to follow the KZbin video, after downloading the folder from your github, open same on my vscode, and install node_module with npm install. Then get error when I run npm run dev. The error is [plugin:vite:css] [postcss] Cannot read properties of undefined (reading 'config'). What should I do please

[@vonderklaas]

Try to get the repo link, not zip git clone [repo link] cd [name of repo] npm i && npm run dev Worked for me!

[@BrianKarmo]

Is anybody else getting a issue with the layout of the phone and the text being position to the left side of the screen for some odd reason maybe I have a typo or missed a instruction but that is my issue as of now I'm halfway through this project if anyone can help Thank you in advance...!!

[@adityasagar9078]

all my content is being getting inserted on the left screen,also the css isnt applied to any object,I am currently at 21:09 maybe we will do that later

[@Dhanushsaji]

Not able to install webgi library

[@nuckles7014]

That’s the same problem am having😢

[@sumitkharbuja3583]

import webgi problem in nextjs dependency package installation step require

[@nuckles7014]

Same as mine

[@raidon5553]

Good 1:0:21

[@pouriakalantari6537]

this tutorial is not for beginner to Three.js or WEBGL. its best practise for whom knows it very well

[@nuckles7014]

How did you import webgl on your webglViewer.jsx? He never stated it or even run any installation through the terminal🤦🏻‍♂️

[@sonurawat7766]

Webgi 3d image is not showing.. why?

[@nuckles7014]

Same as mine

[@joshualynn9885]

Has anyone deployed it and have it working for mobile devices? Mine works for desktop but not on an actual mobile device. Mine throws this error on a mobile browser: "Error THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false" and points to some code I didn't write?

[@kaarthikeyan8618]

if you dont mind can you share your github repository of this site?

[@Fetrah2]

⭐ Chapters ⭐ ⌨ (0:00:00) Intro ⌨ (0:01:27) Project setup ⌨ (0:07:12) Building website navigation ⌨ (0:15:02) Building jumbotron ⌨ (0:21:42) Building sound section ⌨ (0:29:27) Building display section ⌨ (0:33:27) How to find and load 3D models ⌨ (0:36:55) Building WebGi viewer component ⌨ (0:53:17) Animating 3D model with GSAP scroll animation ⌨ (1:13:42) Implementing 3D model preview mode ⌨ (1:32:27) Optimizing 3D animation for mobile phones ⌨ (1:43:31) Building production-ready website and uploading ⌨ (1:45:07) Outro

[@Lyliiz1]

gitbash option not showing up how do i go about

[@subject7287]

you've probably figured it out by now but install gitbash (git-scm.com/downloads). close vs code and reopen, it should be there

[@tonienguix4834]

did you really zoom out to make elements smaller?? FF

[@adilboudida3412]

code source?

[@lowlifeglitch6199]

function setupViewer is totally different in webgi-vanilla-starter/src from the one in the video I guess with no update all this coding is useless

[@k-c]

Actual apple website literally uses hundreds of images to create their animation.

[@FaizKhan-mu7ce]

image sequence

[@bad7k807]

It's probably because manipulating this type of 3D object can bring performance issues on mobile devices

[@petrolnaut]

Anyone else's animations break after deployment?

[@mdshakeel972]

Sorry to say but this worst ....not saying how to install the dependencies

[@paulmathew1214]

At 46:42 I am getting an error canvasRef is not defined. Anyone know whats up? I redid this section, put the video on 3/4 speed and followed it to the T

[@jrip_lord3876]

First

[@dhananjayadk4611]

1st comment PLz 📌 me 😊❤

[@Almighty_Flat_Earth]

Angular is the matured professional framework, it has simple syntax than react. React is hard to understand, the DX of react is horrible. React is a child play. When it comes to serious enterprise app development, Angular comes in glory. React has brought shame to JavaScript community by making web development unnecessarily complicated.

[@Almighty_Flat_Earth]

This react js nonsense is everywhere. May God save us all from react hell.

[@MSRproduction2066]

already 5k likes .. so where is your free source code.?

[@Jhansi-ci9sf]

I have a problem my phone component is stuct in bottom not inline with phone image, does anyone have same problem, please help me @freecodecamp.

[@Jhansi-ci9sf]

Edit : the above code is temporary after (1:26:30) your code will show iPhone on correct location as well as you will be able to play with it You will not need above code once you do this