Ochi Design - Clone Website 🎨✨

This repository contains a partial clone of the Ochi Design website, created using React. It focuses on the Home page with some animations to capture the interactive elements of the original design. While the project is not a complete clone, it showcases animation techniques and smooth scrolling effects.

---

Live Demo 🚀

Check out the deployed site here: Ochi Design Clone

---

Original Website 🌐

The original Ochi Design website:
https://ochi.design/

---

Tech Stack 🛠️

• React: For building the UI.
• Framer Motion: For smooth animations and transitions.
• Locomotive Scroll: To implement parallax scrolling.
• GSAP (GreenSock Animation Platform): For advanced animations triggered by scroll events.
• CSS & SCSS: For custom styling.

---

Features Implemented 🧑‍💻

• Animated Home Page: Mimicking the style of the Ochi Design homepage.
• Framer Motion Effects: Smooth transitions and hover animations.
• Locomotive Scroll Integration: Smooth scrolling with parallax effects.
• GSAP Animations: Scroll-triggered and timeline animations for enhanced interactivity.

---

How to Run the Project Locally ⚙️

1. Clone the Repository:

   git clone https://github.com/mayurk224/Website-with-Animation-React
   cd Website-with-Animation-React

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm run dev

4. Open in Browser:
   Go to http://localhost:5173 to view the app.

---

Screenshots 📸

(Add relevant screenshots of your project to highlight animations and layout.)

---

Challenges Faced 🤯

• Locomotive Scroll with React: Managing DOM elements efficiently while integrating smooth scrolling.
• GSAP with Hooks: Using GSAP animations without affecting React's reactivity.
• Performance Optimization: Ensuring animations remain smooth on various devices and browsers.

---

Future Enhancements 🚀

• Complete Additional Pages: Expand the project to clone more sections like the portfolio and contact pages.
• Mobile Optimization: Improve responsiveness for smaller screens.
• Dark Mode: Add a toggle for light and dark themes.

---

Acknowledgements 💙

• Ochi Design for providing the inspiration.
• Framer Motion, GSAP, and Locomotive Scroll for their animation libraries.
• Tutorials and documentation from YouTube and other open-source resources.

---

License 📝

This project is for educational purposes only. All rights of the original design belong to Ochi Design.

---

Contact 📧

For any questions or feedback, reach out at mayurkamble0250@gmail.com.

---

Thank you for visiting the Ochi Design Clone! 🎉 Stay tuned for future updates and improvements.