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

222,940
0
Published 2024-03-15
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/threejs-gsap-guide?utm_sour…
📘 ESLint & Prettier Guide - resource.jsmastery.pro/eslint-prettier-guide?utm_s…

🌟 Become a top 1% Next.js 14 developer: www.jsmastery.pro/ultimate-next-course?utm_source=…
🚀 Skyrocket your career in 4 months: jsmastery.pro/full-stack-web-development-bootcamp?…


📚 Materials/References:
GSAP Workshop Starter: github.com/JavaScript-Mastery-Pro/gsap-cc-starter
GSAP Workshop Final: github.com/JavaScript-Mastery-Pro/gsap-crash-cours…
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/iphone
README (assets & code): github.com/adrianhajdin/iphone/blob/main/README.md
GLTFs into JSX: github.com/pmndrs/gltfjsx

💻 Join our Discord Community - discord.gg/n6EdbFJ
🐦 Follow us on Twitter: twitter.com/jsmasterypro
🖼️ Follow us on Instagram: instagram.com/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

All Comments (21)
  • @ZainAliSiddiqui
    Your contributions to the web development community are truly commendable.
  • AI replacing humans ? No way. This guy is more creative than all 1000 AI combined.
  • I started watching your videos in 2021, in 2022 I got a job as a Mid-Level Full-Stack Developer without even being a Junior before, and now I've changed my life entirely and my family's life. I have the biggest income of my whole family. Thanks for your contributions.
  • @Santopirata
    Yes! A crash course on ThreeJS would be amazing!
  • @bhagya1710
    What you are doing for dev community is really special. I genuinely mean it!
  • @user-fm5nx3fq3n
    Bro, this is what was missing. A crash course and then the actual project. Its so cool that there's no assumptions that we already know everything.
  • @celer.e.v
    Because of this projects. I landed a job in Apple! Thank you for your awesome Videos!
  • @AsadKhan-gp9sk
    Yes finally gsap and three js Please we need more videos like this
  • @michaelhope8442
    1. It's a really beautiful job you've done. I'm impressed. Thank you so much for this! 2. For information, regarding the bug that some people mentioned about the fact that on smartphone some can not scroll, I found this solution by adding in index.css this part : main { touch-action: pan-y; overflow-y: auto; }
  • @Racine14
    Very interesting... I am work with NextJs but the some logic of animation.
  • Yes! Crash course for both the topic which will cover all in and out. Thank you for this informative video.
  • @DigitalCreator5
    I like the fact that you're going to teach use the website speed aspect alongside the 3d tutorial thanks alot Adrian am inspired 🎉
  • @user-ww4gz7wx4t
    There's so many things i need to learn and i don't know where to start and just ended up wasting time. These videos are a solution for me. All I need to do is follow them, I gain knowledge, wrote myself and no more wasted time doing nothing.
  • @Nab_001
    your teaching skills are incredible, I have never seen a tutor on youtube take from his/her time to make us an interactive documentation
  • @user-op2wm2xo6w
    Stumbled upon this gem of a tutorial on building and deploying an Apple-like website using React, Three.js, and GSAP, and I'm absolutely amazed! As a beginner, finding resources that break down complex concepts into manageable steps is golden. Your tutorial did just that, and seeing the like and view counts, it's clear I'm not the only one who thinks so. The date (31 March 2024) will be marked as the day I truly started to grasp the power of combining React with these incredible animation and 3D libraries. Would you consider creating more tutorials that dive deeper into Three.js and GSAP? Exploring specific animations or 3D models and how to integrate them seamlessly into React projects, including connecting these projects with an SQL database for dynamic content management and interaction, would provide a well-rounded approach to building interactive and data-driven web applications. Your ability to demystify these technologies and make them accessible is a rare talent, and I can't wait to see what topic you'll tackle next! Thank you for sharing your knowledge and enthusiasm with us.
  • @kenshalom6098
    the framework industry should be paying you well you have showcased their products so well to the consumers never we would have known after running away from wordpress with all its issues that we could use payload far much better or have better serveless configurations into our web development flow that are just cool and fast enough. thank you
  • @kushaltanna5569
    Full course on threejs and gsap will be amazing.! Your style of explaining is really engaging and easy to understand