DUO Studio (https://duo-studio.co/) is an Awwwards-winning website, celebrated for its simplicity and well-designed structure that encompasses all essential design principles. Inspired by its design excellence, I set out to create a frontend clone of this website, aiming to replicate its clean and sophisticated UI/UX features and animations.
To achieve this, I utilized the following technologies:
- HTML: For the foundational structure of the website.
- Advanced CSS: For styling and various micro-animations to closely mimic the original design.
- JavaScript: For functionality and to enhance the user interface, following all design principles.
I leveraged powerful JavaScript libraries to create a dynamic and interactive user interface:
- GSAP: For major animations.
- ScrollTrigger: For custom scroll-based animations, such as changing the background and text color upon scrolling, and effectively using the pin property to pin elements during scrolling for an enhanced user experience.
- Locomotive Scroll: For smooth scrolling effects and precise control over the scroll speed of different elements on the site.
This project provided a profound learning experience, particularly in mastering advanced animation and scrolling techniques. Exploring how DUO Studio integrates these features helped improve my understanding of the Locomotive JS library and the effective use of ScrollTrigger for custom scroll-based animations. Recreating this Awwwards-winning website allowed me to delve into advanced web design techniques, providing insights into the integration of sophisticated animations. The process of replicating the site’s features and functionalities was both challenging and rewarding, significantly contributing to my professional growth.
I invite you to explore the repository and experience the clone of DUO Studio. Your feedback and suggestions are highly appreciated, as they will help me continue to improve and refine my skills. Feel free to share your thoughts and insights on the project!