Hello guys, Welcome to Africa's Largest Video Search Engine, and you are watching ๐ฅBuild awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP. and this video is uploaded by CodeBucks at 2022-09-13T07:11:41-07:00. We are just promoting this video only for entertainment and educational purpose only. I hop you like our Video Search Engine. [cT160dOzpGY]
| Name | ๐ฅBuild awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP |
| Video Uploader | Video From CodeBucks |
| Upload Date | This Video Uploaded At 13-09-2022 14:11:41 |
| Video Discription | Tutorial๐ to create Apple iPhone 14 landing page using ThreeJs + ReactJS Demo Link๐ค: https://apple-iphone14.vercel.app/ Blog๐: https://devdreaming.com Hi there ๐, 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 I have used different libraries to render 3D model in a React application and made a unique design, You can check the demo link. 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 ----------------------------------------------------------------------------------------------------------- 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 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 Watch the full video to understand, so that you can easily build and customize your own website. [๐ ๐ฌ๐ญ๐ซ๐จ๐ง๐ ๐ฅ๐ฒ ๐ฌ๐ฎ๐ ๐ ๐๐ฌ๐ญ ๐ฒ๐จ๐ฎ ๐ญ๐จ ๐ฐ๐ซ๐ข๐ญ๐ ๐๐จ๐๐ ๐๐ฅ๐จ๐ง๐ ๐ฐ๐ข๐ญ๐ก ๐ฆ๐ ๐ฌ๐จ ๐ฒ๐จ๐ฎ ๐๐๐ง ๐ฅ๐๐๐ซ๐ง ๐ญ๐ก๐ ๐๐ฅ๐จ๐ฐ ๐จ๐ ๐๐ซ๐๐๐ญ๐ข๐ง๐ ๐ญ๐ก๐ข๐ฌ] ๐๐ผ๐น๐น๐ผ๐ ๐บ๐ฒ ๐ผ๐ป ๐ ๐๐ต๐ฒ๐ฟ๐ฒ ๐'๐บ ๐๐ต๐ฎ๐ฟ๐ถ๐ป๐ด ๐น๐ผ๐'๐ ๐ผ๐ณ ๐๐๐ฒ๐ณ๐๐น ๐ฟ๐ฒ๐๐ผ๐๐ฟ๐ฐ๐ฒ๐! Twitter๐ค : https://twitter.com/code_bucks LinkedIn ๐: https://www.linkedin.com/in/codebucks/ Instagram ๐ซ: https://www.instagram.com/code.bucks Email ๐ง: codebucks27@gmail.com In upcoming videos, I'm going to create lots of cool stuff with JavaScript and React so make sure to subscribe. Like, Sub๐ฅ & Share! โฅ Learn More About, ๐ฅBuild a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ] https://youtu.be/Ra1Fsa9YJCk ๐ฅCreate an NFT Collection Website Landing page with React JS [Mobile Responsive] https://youtu.be/edr2o59Twrs ๐ฅBuild a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ] https://youtu.be/jcohAIaSy2M Build Responsive website with ReactJS, Styled-Components & GSAPโฃ๏ธ: https://youtu.be/aAEfBxcGpJ8 Build Devto Clone in React: https://youtube.com/playlist?list=PLjxZxD6BDkebDKxYH4El8P4Obb5VzcGlX Build Awesome stuff with ReactJs (Playlist) : https://youtube.com/playlist?list=PLjxZxD6BDkebOPXoqccGpiinfdY9zybXm React Advanced Topic (Playlist) : https://www.youtube.com/playlist?list=PLjxZxD6BDkeZoRU6v7gMyQ7BirGD6u0Lt If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below. Thank You for watching! ๐ Buy me a coffee and Support this channel๐ฅฐ: https://www.buymeacoffee.com/CodeBucks Where else you can find me: Twitter๐ค : https://twitter.com/code_bucks LinkedIn ๐: https://www.linkedin.com/in/codebucks/ Instagram ๐ซ: https://www.instagram.com/code.bucks Email ๐ง: codebucks27@gmail.com Disclaimer: All videos are for educational purposes only, please use them wisely. #AppleIphoneLandingPage #landingpage #reactjs [cT160dOzpGY] |
| Category | Education |
| Tags | landing page for apple iphone using ThreeJS + ReactJS | landing page using threejs and reactjs | How to render 3d model using threejs | how to render 3d model in react js | create responsive landing page | use gsap with threejs | how to create 3d website in react | create website in react | react js website tutorial | make website in react js | how to use three js | use three js in react js | how to use react-three-fiber | react-three-fiber | reactjs tutorial | threejs | react website |
