ScrollMagic Pizza Assembly Animation

This ScrollMagic Pizza Assembly Animation transforms a standard product landing page into an interactive storytelling experience. As the user scrolls down, individual pizza ingredients - peppers, mushrooms, olives - fly in from different directions to assemble a complete pizza. The sequence is tightly choreographed using GSAP timelines pinned to the scroll position, giving the user direct control over the “cooking” process.

Core Technique: Pinned Timelines

The magic lies in combining ScrollMagic’s scene pinning with GSAP’s precise timelines.

1. The Ingredient Fly-In (Section 1)

Instead of animating elements based on time, the animation is tied to the scrollbar.

• The Setup: A GSAP timeline (t1) defines the “from” positions of each ingredient (y: -100, x: -150).
• The Trigger: ScrollMagic pins the .first-section for a duration of 100% viewport height. As the user scrolls through this pinned section, the timeline plays, bringing ingredients in one by one (-=4 overlaps the animations for a fluid effect).

let t1 = gsap.timeline();
t1.from(".section_1_01", 4, { y: -100, x: -150, ease: Power3.easeInOut })
  .from(".section_1_02", 4, { y: -150, x: -250, ease: Power3.easeInOut }, '-=4')
  // ... more ingredients

let scene = new ScrollMagic.Scene({
    triggerElement: '.first-section',
    duration: '100%', // Scroll distance to play animation
    triggerHook: 0,   // Trigger at top of viewport
})
.setTween(t1)         // Link GSAP timeline
.setPin('.first-section') // Fix section in place
.addTo(controller);

2. The Wipe Effect (Section 2)

The second section uses a “wipe” or “reveal” technique.

• Two sets of images are stacked: a bottom set (cooked/colored) and a top set (raw/grayscale).
• The GSAP tween reduces the height of the top container to 0.
• This visually “wipes away” the top layer to reveal the bottom layer as you scroll.

let t2 = gsap.timeline();
t2.to('.top .image-container', 4, {
    height: 0 // Wipes the top image to reveal the bottom one
});

Browser Support

This setup relies on ScrollMagic 2.x and GSAP 3.x, which are highly compatible with modern browsers.

Key Technologies:

• ScrollMagic: Handles the scroll triggers and pinning.
• GSAP: Handles the performant transformations.
• CSS Positioning: Absolute positioning is critical for the “stacking” effect of ingredients.