Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React
YouTube Viewers YouTube Viewers
842K subscribers
150,641 views
0

 Published On Mar 15, 2024

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/ultimate-ne...
🚀 Skyrocket your career in 4 months: https://jsmastery.pro/full-stack-web-...


📚 Materials/References:
GSAP Workshop Starter: https://github.com/JavaScript-Mastery...
GSAP Workshop Final: https://github.com/JavaScript-Mastery...
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

show more

Share/Embed