# How to Build an Awesome 3D Landing Page for Apple iPhone with ReactJS, ThreeJS, and GSAP

> Learn how to build an amazing 3D landing page for Apple iPhone using ReactJS, ThreeJS, and GSAP. This tutorial will guide you step by step to add and animate 3d model of iPhone in your website.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/build-3d-landing-page-reactjs-threejs-gsap
- **Author:** CodeBucks
- **Published:** 2022-09-12
- **Last updated:** 2023-03-15
- **Topics:** React Js

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=cT160dOzpGY)**

### Overview

Hey there👋,

I have seen lot of websites that renders a 3D model which really looks cool, So I wanted to create a similar website in `React JS` and then I stumbled upon the `three JS`. Here, in this website I have used `react-three-fiber` and `react-three-drei` to render 3D model of iPhone and used `gsap` for some cool scrolling animations. In this tutorial, I will walk you through the steps needed to create this 3D [landing page](/videos/category/website-template). Along the way, we'll cover essential concepts such as 3D modeling, lighting, animation, and more. You can check the demo of this app from the following link👇

**Link🔗:** [3d landing page built in React.js](https://apple-iphone14.vercel.app/)

### What You'll Learn

By watching this video tutorial, you will learn the following:

- How to redner a 3d model by using `threejs` in a React applications
- How to use `gsap` to animate this 3d model.
- How we can make this 3d model more interactive.
- How to change different properties of 3d model using `threejs`.
- How we can render multiple 3d models.

### Key Features of This 3d Landing Page

- It shows 3d model of an iPhone that will animate on scroll.
- Unique design.
- Mobile Responsive.
- Functionalities such as changing properties of 3d model, interactive and on scroll animation using `gsap`.
- You can change the color of this iPhone and see which on is more suitable.
- Smooth transitions

These features combine to create a truly impressive user experience that will captivate your audience.

### Tools and Libraries Used

For this project, you will use the following libraries:

- React.js (CRA)
- Styled-Components for styling
- Three.js
- react-three/fiber
- react-three/drei
- Gsap

### Code Links

You can find all the code for this project on our GitHub repository.

- Here is the starter code files: [3d landing page starter code files](https://github.com/codebucks27/Apple-iphone-3d-landing-page-starter-Code).
- Here is the final code👉: [3d landing page built using threejs](https://github.com/codebucks27/3D-Landing-page-for-Apple-iPhone). (Give ⭐ to this repo if you like it)

### Resources

You can find all the resources used to make this website from the following:

- [Apple iPhone 13 Pro Max](https://skfb.ly/o7nDN) by DatSketch is licensed under [Creative Commons Attribution](http://creativecommons.org/licenses/by/4.0/).
- A15 Chipset Image from [here.](https://wccftech.com/a15-bionic-underclocked-cpu-new-gpu-configurations-and-more-details-not-shared/).
- Apple Logo for loading screen from [iconfinder](https://www.iconfinder.com/icons/104447/apple_logo_icon).

There are 3 videos:

- Video by [Engin Akyurt](https://pixabay.com/users/engin_akyurt-3656355/?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=21536) from [Pixabay](https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=21536)
- Video by [Brent Olson](https://pixabay.com/users/helix_games-17997136/?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=49791) from [Pixabay](https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=49791)
- Video by [Vimeo-Free-Videos](https://pixabay.com/users/vimeo-free-videos-1283884/?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=699) from [Pixabay](https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=699)

### Time Stamps

The video tutorial has the following time stamps for you to follow along:

- Channel Intro [@00:00:00](https://www.youtube.com/watch?v=cT160dOzpGY&t=0s)
- Intro + Demo [@00:00:10](https://www.youtube.com/watch?v=cT160dOzpGY&t=10s)
- Setup [@00:06:00](https://www.youtube.com/watch?v=cT160dOzpGY&t=360s)
- Adding Basic Styles [@00:09:32](https://www.youtube.com/watch?v=cT160dOzpGY&t=572s)
- Quote Section [@00:15:25](https://www.youtube.com/watch?v=cT160dOzpGY&t=925s)
- Hero Section [@00:31:45](https://www.youtube.com/watch?v=cT160dOzpGY&t=1905s)
- Rendering 3D Model [@00:40:15](https://www.youtube.com/watch?v=cT160dOzpGY&t=2415s)
- Adding Animation Using GSAP [@00:56:00](https://www.youtube.com/watch?v=cT160dOzpGY&t=3360s)
- Design Section [@01:17:15](https://www.youtube.com/watch?v=cT160dOzpGY&t=4635s)
- Display Section [@01:29:30](https://www.youtube.com/watch?v=cT160dOzpGY&t=5370s)
- Processor Section [@01:44:10](https://www.youtube.com/watch?v=cT160dOzpGY&t=6250s)
- Battery Section [@01:56:00](https://www.youtube.com/watch?v=cT160dOzpGY&t=6960s)
- Color Section [@02:08:05](https://www.youtube.com/watch?v=cT160dOzpGY&t=7685s)
- Animating 3D Model [@02:26:20](https://www.youtube.com/watch?v=cT160dOzpGY&t=8780s)
- Camera Section [@02:44:00](https://www.youtube.com/watch?v=cT160dOzpGY&t=9840s)
- Pricing Section [@02:58:55](https://www.youtube.com/watch?v=cT160dOzpGY&t=10735s)
- Using Context API [@03:20:47](https://www.youtube.com/watch?v=cT160dOzpGY&t=12047s)
- Adding Loading Screen [@03:36:35](https://www.youtube.com/watch?v=cT160dOzpGY&t=12995s)
- Making Website Responsive [@03:40:50](https://www.youtube.com/watch?v=cT160dOzpGY&t=13250s)
- Final touch [@04:19:20](https://www.youtube.com/watch?v=cT160dOzpGY&t=15560s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._