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/threej...
 ESLint & Prettier Guide  https://resource.jsmastery.pro/eslint...

Become a top 1% Next.js 14 developer: https://www.jsmastery.pro/ultimatene...
Skyrocket your career in 4 months: https://jsmastery.pro/fullstackweb...


Materials/References:
GSAP Workshop Starter: https://github.com/JavaScriptMastery...
GSAP Workshop Final: https://github.com/JavaScriptMastery...
GitHub Repository (give it a star ⭐): https://github.com/adrianhajdin/iphone
README (assets & code): https://github.com/adrianhajdin/iphon...
GLTFs into JSX: https://github.com/pmndrs/gltfjsx

Join our Discord Community   / discord  
Follow us on Twitter:   / jsmasterypro  
Follow us on Instagram:   / javascriptmastery  

Business Inquiries: [email protected]

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