https://github.com/shahramshakiba/apple-inspired

🚧 Under Maintenance | Design a sleek 3D website with impressive animations and high-quality 3D models to emulate Apple's style (⚪Three.js,🟢GSAP,🔵React.js,🟣Tailwind CSS)
https://github.com/shahramshakiba/apple-inspired

animations gsap threejs

Last synced: 2 days ago
JSON representation

🚧 Under Maintenance | Design a sleek 3D website with impressive animations and high-quality 3D models to emulate Apple's style (⚪Three.js,🟢GSAP,🔵React.js,🟣Tailwind CSS)

• Host: GitHub
• URL: https://github.com/shahramshakiba/apple-inspired
• Owner: ShahramShakiba
• Created: 2024-06-02T16:43:58.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-08T19:21:53.000Z (5 months ago)
• Last Synced: 2024-06-09T20:28:51.850Z (5 months ago)
• Topics: animations, gsap, threejs
• Language: JavaScript
• Homepage:
• Size: 37.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#    _Apple inspired_       

###   _Description_

> To begin with, it is important to note that, this project have been sourced from an exceptional Three.js and GSAP Course from "JavaScript Mastery". 


 

> 👤 Instructed by a _proficient_ and _expert educator_, ` "Adrian Hajdin". `




 

####     _Three.js_ is a JavaScript library that is primarily used for creating 3D computer graphics in a web browser.

- _It provides a wide range of tools and functionalities for developers to build interactive 3D experiences on the web, ranging from simple animations to complex visualizations._

####     _GSAP_, or _GreenSock Animation Platform_, is a powerful JavaScript Animation Library.

-  _GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff._

-  _Animate CSS, SVG, Canvas, React, Vue, WebGL, Colors, Strings, Motion paths, Generic objects..._


 






###    _Apple inspired_    

 #### 🧩 _Picture this: Create a super cool 3D website with awesome animations and top-notch 3D models to give it that sleek look like Apple's site._ 

 _Add in custom animations that react to scrolling, cool stagger effects, timelines, and other fancy features to make the user experience pop just like Apple's design style._

- _This project is not just a showcase of my skills, but a testament to my ability to create dynamic web experiences that push boundaries and leave a lasting impression._ 

 


> [!IMPORTANT]

>> #### It is crucial to grasp that the project incorporates _"Three.js"_, _"Vite"_, _"React.js"_, _"Tailwindcss"_ and _"GSAP Animations"_ to build a visually impressive 3D portfolio.

  


- Get ready to embark on a journey like no other as you explore this innovative _Modern 3D Apple website_ showcase 🤩 





> _Which Concepts Have I Covered_: 

01. _Install all dependencies such as 'Vite', 'React.js', 'Tailwind CSS', 'GSAP', 'Three.js', 'react-three/drei' and 'react-three-fiber'_

02. _Utilizing Videos for the Hero section to have a dynamic experience_

03. _Build a Video Carousel Component, a custom video slider with progress tracking_

04. _Utilizing "scrollTrigger" to schedule playing the video_

05. _Utilizing "useGSAP" along with "onLoadedMetadata" property to play the videos_

06. _Handle the Progress duration exactly as Video duration_

07. _Animate the Video slider using GSAP animations_

08. _Create a custom component for rendering our Models using react three fiber_

09. _Using "View" component for rendering 3D objects and scenes._

10. _Using "Environment" to defining the overall look and feel of a background environment for the scene 3D scene._

11. _Using Lightformer to create custom lights with various shapes and properties in a 3D scene._

12. _Using https://gltf.pmnd.rs/ to convert our model into jsx codes_

13. _Add Animation to our Apple Model with GSAP using timeline()_

14. _Using SENTRY an Application monitoring software_

15. __

 




#### _Give it a go in real-time and give me a Star_       _Apple inspired_  






  
 

***

 ##  Find me around the Web