Creating a Scroll-Triggered Animation Effect

I'll help you recreate a scroll-triggered animation effect similar to what you're looking for using GSAP's ScrollTrigger. Since I can't directly view the video you've linked, I'll provide a general approach for creating scroll-based animations that likely match what you're trying to achieve.

Basic Setup

First, you'll need to include the necessary libraries:

HTMLCopied
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

HTML Structure

Create a basic structure with sections that will animate as you scroll:

HTMLCopied
<div class="container">
  <section class="panel intro">
    <h1>Scroll Down</h1>
  </section>
  
  <section class="panel">
    <div class="animation-element"></div>
  </section>
  
  <section class="panel">
    <div class="animation-element"></div>
  </section>
  
  <!-- Add more sections as needed -->
</div>

CSS Styling

CSSCopied
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
}

.container {
  width: 100%;
}

.panel {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.animation-element {
  width: 300px;
  height: 300px;
  background-color: #3498db;
  position: relative;
}

JavaScript with GSAP and ScrollTrigger

Here's a basic implementation that creates scroll-triggered animations:

JAVASCRIPTCopied
// Initialize GSAP with ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// Create a timeline for your animations
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container",
    start: "top top", 
    end: "bottom bottom",
    scrub: 1, // Smooth scrubbing effect
    pin: true, // Pin the container during the animation
    markers: true // Helpful during development
  }
});

// Add animations to the timeline
tl.to(".animation-element", {
  scale: 2,
  rotation: 360,
  duration: 3
})
.to(".animation-element", {
  backgroundColor: "#e74c3c",
  borderRadius: "50%",
  duration: 3
})
.to(".animation-element", {
  y: -100,
  opacity: 0,
  duration: 3
});

// You can add more complex animations as needed

Advanced Techniques

For more complex effects, you might want to:

1. Use multiple timelines for different sections
2. Implement horizontal scrolling
3. Add 3D transformations with CSS or Three.js
4. Create parallax effects

Here's an example of a more advanced setup:

JAVASCRIPTCopied
// Create separate animations for each panel
document.querySelectorAll('.panel').forEach((panel, index) => {
  if (index === 0) return; // Skip the intro panel
  
  const element = panel.querySelector('.animation-element');
  
  // Create a unique animation for each panel
  gsap.timeline({
    scrollTrigger: {
      trigger: panel,
      start: "top bottom", 
      end: "bottom top",
      scrub: true,
      markers: true
    }
  })
  .from(element, {
    x: index % 2 ? 300 : -300,
    opacity: 0,
    rotation: index % 2 ? 90 : -90,
    scale: 0.5,
    duration: 1
  })
  .to(element, {
    backgroundColor: `hsl(${index * 60}, 80%, 60%)`,
    borderRadius: `${index * 10}%`,
    duration: 1
  });
});

To get more specific guidance, I'd need to know more details about the particular effect you're trying to recreate from the video. Feel free to describe the specific animations you're looking to implement!