Dulux Velvet Touch
The Dulux Eterna website is a premium web experience for Dulux India's luxury paint collection. The site provides a visually rich and interactive experience, showcasing the elegance of Eterna paints through immersive animations and high-quality imagery. The hero section features a dynamic scrolling effect where a golden "V" SVG expands to reveal a video inside, creating an impactful first impression.
Roles In Project
- Frontend Developer – Implemented all the frontend coding based on the UI/UX designer’s design.
Responsibilities
- Developed the website using Vite, React, and TypeScript for optimal performance.
- Implemented GSAP and Framer Motion animations for smooth scrolling and interactive elements.
- Created a complex SVG mask animation in the hero section to reveal the video dynamically.
- Managed and optimized more than 1000 structured image files efficiently.
- Designed and implemented the "Inspiration" section’s scroll-based clip-path animations.
- Ensured smooth animations and performance optimization across different devices.
The Dulux Eterna website is a sophisticated and engaging platform that highlights the elegance of the Eterna collection through advanced web animations and high-quality visuals.
The project required meticulous animation work, including an intricate hero section where a golden "V" SVG expands to reveal a video upon scrolling. Additional interactive elements, such as the inspiration section’s scroll-driven animations, enhance user engagement.
Managing a large number of nested images and optimizing web performance were key aspects of the project. Despite the challenges, the site was successfully built and delivered with a smooth and visually stunning user experience.
Features
Scrolling Video Reveal: The golden "V" SVG expands on scroll, revealing a premium product video.
Smooth Scroll Animations: GSAP and Framer Motion power seamless transitions and interactions.
Clip-Path Animations: Unique section animations using Framer Motion's clip-path techniques.
Optimized Image Handling: Efficiently managed 1000+ structured images for better loading performance.
Responsive & High Performance: Built with Vite and optimized for speed and responsiveness.
Challenges
SVG Video Masking Performance: Implementing the golden "V" expansion effect while keeping animations smooth was tough due to the complexity of the SVG and video masking. Despite the inherent lag issues, I optimized the animation to reduce performance drops.
Advanced GSAP & Framer Motion Scroll Animations: Learning and implementing complex timeline-based scroll animations was a challenge but provided valuable experience.
Clip-Path Animations in the Inspiration Section: Implementing scroll-driven clip-path animations required deep experimentation and learning.
Managing 1000+ Structured Images: The large number of images and their nested structure made handling them difficult, especially since it was my first time working with Vite.
Technology Stack
- Vite
- React
- Typescript
- GSAP
- Motion