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 - hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
🌟 Sentry - bit.ly/4abT6PG
📙 Three.js & GSAP Guide - resource.jsmastery.pro/threej...
📘 ESLint & Prettier Guide - resource.jsmastery.pro/eslint...
🌟 Become a top 1% Next.js 14 developer: www.jsmastery.pro/ultimate-ne...
🚀 Skyrocket your career in 4 months: jsmastery.pro/full-stack-web-...
📚 Materials/References:
GSAP Workshop Starter: github.com/JavaScript-Mastery...
GSAP Workshop Final: github.com/JavaScript-Mastery...
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/iphone
README (assets & code): github.com/adrianhajdin/iphon...
GLTFs into JSX: github.com/pmndrs/gltfjsx
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / 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
15 июн 2024
