Mixtura
Mixtura™ is a US-based beverage product crafted from natural fruit blends, offering a richly flavored alternative to traditional purees and juices. The website was designed to reflect the brand’s premium, artisanal positioning through rich visuals and interactive storytelling.
While working at a creative agency in Indonesia, I contributed to the frontend development of Mixtura’s official website. The project’s goal was to deliver a highly interactive, animated site that visually represented the freshness and premium quality of Mixtura’s fruit-based products.
Despite using a legacy tech stack — HTML, jQuery, and Bootstrap — the site was developed with a modern user experience in mind. All animations were handcrafted using GSAP (GreenSock Animation Platform) and manual scroll event scripting, without the aid of newer tools like Webflow or Framer which were not yet mainstream at the time.
A major challenge was ensuring fluid and performant animations across all devices, particularly mobile, where scroll behavior and resource management required meticulous fine-tuning.
🧩 Features I Worked On
Responsive Website Development
Built fully responsive layouts using Bootstrap and custom CSS
Crafted smooth layout transitions across desktop, tablet, and mobile
Hand-Coded Animations & Scroll Interactions
Developed all animations manually using GSAP
Synchronized UI transitions with scroll triggers and user actions
Controlled timing and easing for precise storytelling animations
Performance Optimization
Minimized animation jank on mobile devices
Implemented lightweight scroll logic to avoid performance drops
Ensured consistent behavior across browsers and screen sizes
🛠️ Tech Stack & Tools Used
Frontend: HTML, CSS, jQuery, Bootstrap
Animation: GSAP (GreenSock Animation Platform)
Interaction: Scroll event scripting (vanilla JavaScript + jQuery)
Tooling: Adobe Photoshop & Sketch (design handoff), Git