Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React
Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all.
โญ Hostinger - https://hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
๐ย Sentry - https://bit.ly/4abT6PG
๐ย Three.js & GSAP Guide - https://resource.jsmastery.pro/threejs-gsap-guide?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=threejs_guide
๐ย ESLint & Prettier Guideย -ย https://resource.jsmastery.pro/eslint-prettier-guide?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=eslint_guide
๐ Become a top 1% Next.js 14 developer: https://www.jsmastery.pro/ultimate-next-course?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=next14
๐ Skyrocket your career in 4 months: https://jsmastery.pro/full-stack-web-development-bootcamp?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=masterclass
๐ Materials/References:
GSAP Workshop Starter: https://github.com/JavaScript-Mastery-Pro/gsap-cc-starter
GSAP Workshop Final: https://github.com/JavaScript-Mastery-Pro/gsap-crash-course
GitHub Repository (give it a star โญ): https://github.com/adrianhajdin/iphone
README (assets & code): https://github.com/adrianhajdin/iphone/blob/main/README.md
GLTFs into JSX: https://github.com/pmndrs/gltfjsx
๐ป Join our Discord Community - https://discord.gg/n6EdbFJ
๐ฆ Follow us on Twitter: https://twitter.com/jsmasterypro
๐ผ๏ธ Follow us on Instagram: https://instagram.com/javascriptmastery
๐ผ Business Inquiries: contact@jsmastery.pro
Time Stamps ๐
00:00:00 โ Intro
00:01:47 โ GSAP and 3D Crash Course
00:11:23 โ GSAP Workshop
00:39:33 โ Setup hosting & domain
00:42:00 โ Project Setup
00:54:50 โ Navbar
01:01:37 โ Hero section
01:16:39 โ Highlights section
01:23:19 โ Video Carousel
02:02:53 โ 3D Model section
02:50:00 โ Sentry Performance
03:06:30 โ Features section
03:27:51 โ How it works section
03:41:16 โ Footer
03:47:12 โ Deployment
Posted Apr 6
click to rate
Share this page with your family and friends.