Build and Deploy an Apple Website with React | Beginner Three.js & GSAP Tutorial

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 BLACK FRIDAY | Save up to 80% for the Business plan for just $2.95 per month - https://hostinger.com/mastery10, with a 91% off coupon code: JAVASCRIPTMASTERY

🌟 Sentry - https://bit.ly/4abT6PG

📙 Limited-time FREE 218-page Ultimate Next.js eBook - https://resource.jsmastery.pro/nextjs-ebook
📙 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 15 developer: https://www.jsmastery.pro/ultimate-next-course?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=next15
🚀 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