In this video, We are going to create cool landing page for Apple iPhone 14 Pro Max where we will render 3D model using ThreeJs and add scrolling animations using GSAP.
Here we used different libraries to render 3D model in a React application and made a unique design, You can check the demo link.
Timestamp⌛:
Channel Intro @00:00:00
Intro + Demo @00:00:10
Setup @00:06:00
Adding Basic Styles @00:09:32
Quote Section @00:15:25
Hero Section @00:31:45
Rendering 3D Model @00:40:15
Adding Animation Using GSAP @00:56:00
Design Section @01:17:15
Display Section @01:29:30
Processor Section @01:44:10
Battery Section @01:56:00
Color Section @02:08:05
Animating 3D Model @02:26:20
Camera Section @02:44:00
Pricing Section @02:58:55
Using Context API @03:20:47
Adding Loading Screen @03:36:35
Making Website Responsive @03:40:50
Final touch @04:19:20
Don't forget to watch the whole video, we're going to learn a lot of stuff like,
▶️ How to render 3D model in ReactJS applications
▶️ How to create Scrolling effects using Gsap
▶️ How we can leverage the advantages of Context API
▶️ How to use ThreeJS in React JS
For this project, we're going to use,
▶️ React JS (CRA)
▶️ GSAP for scrolling animations
▶️ styled-components for styling
▶️ react-three-fiber and react-three-drei to render 3D model
-----------------------------------------------------------------------------------------------------------
Starter CODE:
➡ Link 💚: https://github.com/codebucks27/Apple-iphone-3d-landing-page-starter-Code
Final CODE:
➡ Link 💚: https://github.com/codebucks27/3D-Landing-page-for-Apple-iPhone
Buy me a coffee and Support this channel🥰:
https://www.buymeacoffee.com/CodeBucks
-----------------------------------------------------------------------------------------------------------
Demo Link🖤: https://apple-iphone14.netlify.app/
Blog📖: https://devdreaming.com
Subscribe: https://www.youtube.com/@CodeBucks/featured
