Videos » Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React

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

Posted by admin
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

Embed  |  118 views