https://github.com/getfrontend/react-app-iphone

Recreation of the last Apple iPhone website, combining GSAP animations and Three.js 3D effects with cool custom slider.
https://github.com/getfrontend/react-app-iphone

gsap gsap-animation gsap-scrolltrigger gsap-timeline iphone react react-three-drei react-three-fiber reactjs three-js threejs

Last synced: 14 days ago
JSON representation

Recreation of the last Apple iPhone website, combining GSAP animations and Three.js 3D effects with cool custom slider.

• Host: GitHub
• URL: https://github.com/getfrontend/react-app-iphone
• Owner: getFrontend
• Created: 2024-03-15T21:33:28.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-03-19T17:50:48.000Z (11 months ago)
• Last Synced: 2024-12-03T18:49:56.969Z (2 months ago)
• Topics: gsap, gsap-animation, gsap-scrolltrigger, gsap-timeline, iphone, react, react-three-drei, react-three-fiber, reactjs, three-js, threejs
• Language: JavaScript
• Homepage: https://iphone16.vercel.app
• Size: 37.8 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# About

A [new project](https://iphone16.vercel.app/) on **React JS**, which combines **GSAP animation**, 3D model of last iPhone using **THREE.JS**.

Thanks to **JavaScript Mastery** 💎. It was a pleasure to go through another workshop that Adrian Hajdin and his team prepared.

![](https://github.com/getFrontend/react-app-iphone/blob/main/public/react-app-iphone-1.png?raw=true)

![](https://github.com/getFrontend/react-app-iphone/blob/main/public/react-app-iphone-2.png?raw=true)

![](https://github.com/getFrontend/react-app-iphone/blob/main/public/react-app-iphone-3.png?raw=true)

It was fascinating how to use these technologies in conjunction with React JS using the React Three Fiber and React Three Drei libraries.

It turned out to realize:

✔ a modern beautiful website with Bento grids with interesting animations that trigger to screen scrolling,

✔ a very cool slider carousel without using the Swiper library,

✔ make a fast enough site with high scores in PageSpeed Insights.

Also managed to implement and try out the _Sentry_ service to monitor the performance of the application and track bugs that users may have.

## ⚙️ Tech Stack

- React.js

- Tailwind CSS

- Three.js

- React Three Fiber

- React Three Drei

- GSAP (Greensock) animation

- Vite