GSAP - ScrollTrigger

by Hugo Vale Pereira

HTML

<!--Tutorial from: https://www.youtube.com/watch?v=Gy9IS0Y6dy0  Nov 2025
inspired from: https://www.wildyriftian.com/works
-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<nav>
  <p>Tutorial</p>
  <p>GSAP</p>
</nav>

 <h1>Scroll horizontalmente no container abaixo</h1>
  
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>

CSS

body {
      margin: 0;
      padding: 20px;
    }
    
    .container {
      display: flex;
      overflow-x: auto;
      gap: 2rem;
      padding: 20px;
      background: #f0f0f0;
      scroll-behavior: smooth;
    }
    
    .item {
      flex-shrink: 0;
      width: 300px;
      height: 200px;
      background: #3498db;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: white;
      font-size: 2rem;
    }

JavaScript

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
  trigger: ".container",
  start: "top top",
  end: "bottom bottom",
  horizontal: true, // this is the key!
  scrub: true,
  y: "50px"
});