DEV Community

Cover image for Build awesome🔥 landing page for Apple iphone using ThreeJS + ReactJS
CodeBucks
CodeBucks

Posted on

3 1

Build awesome🔥 landing page for Apple iphone using ThreeJS + ReactJS

Hey there👋,

I have seen lot of website that render 3D model which really looks cool, So I wanted to create 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.

You can see the Demo from here👇
https://apple-iphone14.netlify.app/

For this project, I have used these libraries,
▶️ React JS (CRA)
▶️ GSAP for smooth scrolling animations
▶️ Styled-Components for styling
▶️ @react-three/fiber
▶️ @react-three/drei

I wanted to make it more interactive so I have added GSAP scroll-trigger for some effects on scroll.

Here is the tutorial on how I have created this website!

Before using this website for commercial purposes, make sure to check the license of all images and other assets.

I will try to improve its speed and performance.
Feel free to try different designs and animations with it,
Try to tweak some of these effects and you can also tag me on twitter or share your link in the comments.

Any suggestions are welcomed!

Thanks For Reading😄

Feel free to visit my youtube channel:
@CodeBucks

Follow me on Twitter where I'm sharing lots of useful resources!
@code_bucks😉

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay