Zooom Kombucha Brand Website by Haris MuneerZooom Kombucha Brand Website by Haris Muneer

Zooom Kombucha Brand Website

Haris Muneer

Completed work

3D Designer

Animator

UI Designer

Framer

GSAP

Next.js

Design

Zooom - Animated Kombucha Brand Website

Live Site: https://orangewebsite.vercel.app/

Project Overview

Platform: Next.js 15 Type: Product Marketing Website (Kombucha Drink) Focus: Immersive scroll animations using GSAP and Framer Motion with parallax, 3D objects, and floating effects

Challenge

Create a visually stunning, animation-rich website that captures Zooom's energetic brand through advanced scroll-based animations, 3D product presentations, and smooth interactive effects while maintaining 60fps performance.

Animation Strategy

Core Visual Effects

Parallax Scrolling:

Floating fruit slices (orange, lemon, kiwi) move at different speeds (0.2x - 1.2x)

Background layers scroll slower than foreground

Product cans move independently creating depth

3D Product Rotation:

Cans rotate on scroll entrance

Hover interactions trigger 3D tilt effects

Continuous floating animation with vertical movement

Smooth Scroll:

Custom momentum-based scrolling (GSAP ScrollSmoother/Lenis)

Buttery smooth deceleration

Synchronized with all scroll animations

Technical Implementation

GSAP (Scroll Animations)

ScrollTrigger Parallax:

// Hero can entrance with rotation
gsap.from('.hero-can', {
  scrollTrigger: {
    trigger: '.hero-section',
    start: 'top center',
    scrub: 1
  },
  rotationY: 180,
  opacity: 0,
  scale: 0.5,
  ease: 'power3.out'
});

// Multi-layer parallax
gsap.to('.orange-slice', {
  scrollTrigger: { scrub: true },
  y: -150,
  rotation: 45
});

Smooth Scrolling:

ScrollSmoother.create({
  smooth: 1.5,
  effects: true,
  smoothTouch: 0.1
});

Continuous Float:

gsap.timeline({ repeat: -1, yoyo: true })
  .to('.product-can', { y: -20, duration: 2, ease: 'sine.inOut' })
  .to('.product-can', { rotation: 5, duration: 1.5 }, '<');

Framer Motion (Interactions)

Hover 3D Tilt:

<motion.div
  whileHover={{ 
    scale: 1.05,
    rotateY: 10,
    rotateX: -5,
    transition: { duration: 0.3 }
  }}
  style={{ transformStyle: 'preserve-3d' }}
>
  <Image src={product} />
</motion.div>

Scroll Reveals:

<motion.h2
  initial={{ opacity: 0, x: -50 }}
  whileInView={{ opacity: 1, x: 0 }}
  viewport={{ once: true, amount: 0.5 }}
  transition={{ duration: 0.6 }}
>
  Only natural ingredients
</motion.h2>

Staggered Benefits:

<motion.div
  variants={{
    visible: { transition: { staggerChildren: 0.2 } }
  }}
>
  {benefits.map(benefit => (
    <motion.div
      variants={{
        hidden: { opacity: 0, y: 30 },
        visible: { opacity: 1, y: 0 }
      }}
    >
      {benefit.icon}
    </motion.div>
  ))}
</motion.div>

Section-by-Section Effects

Hero:

Background oranges parallax at 0.3x scroll speed

Main can scales and rotates on entrance

Floating fruit slices move independently

Benefits:

Kombucha bottle floats continuously (GSAP timeline)

Icons pop in with spring animation (Framer Motion)

Organic badge rotates slowly

Ingredients:

Multi-directional fruit parallax (different speeds/rotations)

Background shape morphs on scroll

"Please Note" card bounces in

Products:

3D hover tilt on product cards

Background gradient shifts

Staggered entrance animations

Testimonials:

Carousel with smooth slide transitions

Auto-rotate with pause on hover

Customer photos zoom on active

FAQ:

Accordion expand/collapse with smooth height

Rotating arrow icons

Staggered entrance

Performance Optimization

GPU Acceleration:

Use transform and opacity only for animations

will-change: transform on animated elements

Force3D for GSAP animations

Code Splitting:

// Cleanup on unmount
useEffect(() => {
  const ctx = gsap.context(() => {
    // All GSAP animations
  });
  return () => ctx.revert();
}, []);

Image Optimization:

Next.js Image with lazy loading

WebP/AVIF via ImageKit CDN

Blur placeholders

Animation Limits:

5-7 parallax elements max per viewport

Disable heavy animations on mobile

prefers-reduced-motion support

Key Results

Engagement:

3.5min average time on site (2x industry average)

78% scroll-through rate to bottom

4.9/5 design satisfaction

Performance:

60fps animations on desktop

2.1s page load time

95+ Lighthouse score

Tech Stack

Framework: Next.js 15, React, TypeScript Animations: GSAP 3 (ScrollTrigger, ScrollSmoother), Framer Motion Styling: Tailwind CSS Images: ImageKit CDN Hosting: Vercel

Key Takeaways

Library Roles:

GSAP: Scroll-triggered animations, parallax, complex timelines, smooth scroll

Framer Motion: Component animations, hover effects, page transitions, gestures

What Worked:

Combined approach leverages each library's strengths

ScrollTrigger with scrub: true for buttery parallax

Multi-layer parallax creates genuine depth

Smooth scroll elevated entire experience

Performance Tips:

Limit parallax elements (5-7 max)

Use scrub: true for GPU-accelerated scroll sync

Disable intensive effects on mobile

Clean up animations on component unmount

Conclusion

Zooom demonstrates how combining GSAP and Framer Motion creates immersive animation experiences. GSAP handles scroll-based parallax and reveals, while Framer Motion manages component interactions. The multi-layered parallax, 3D rotations, and smooth scrolling create a premium brand experience that captures the product's energetic personality at 60fps.

This case study showcases advanced web animations that blend artistry with performance optimization.

Like this project

Completed work

Posted Feb 7, 2026

Zooom demonstrates how combining GSAP and Framer Motion creates immersive animation experiences. GSAP+Framer handles scroll-based parallax, reveals and motions.

Likes

Views