<div class="description panel blue">
    <div><h1>Slide-in panels</h1>
      <p>A simple animation linked to a ScrollTrigger with <code>scrub: true</code> creates a nifty effect.</p>
      <div class="scroll-down">Scroll down<div class="arrow"></div></div>

<div id="container">
  <section class="panel red">
  <section class="panel orange">
  <section class="panel purple">
  <section class="panel green">


   <a href="https://greensock.com/scrolltrigger">
     <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
.panel {
  position: absolute;

#container {
  width: 100%;
  height: 100%; 
  position: relative;
  overflow: hidden;

.panel.description {
  position: relative;
gsap.defaults({ease: "none", duration: 2});

// create a sequence that moves 3 of the panels in from different directions 
const tl = gsap.timeline();
tl.from(".orange", {xPercent: -100})
  .from(".purple", {xPercent: 100})
  .from(".green", {yPercent: -100});

// pin the container and link the animation to the scrollbar (scrub: true). We could easily embed this in the gsap.timeline() to shorten things a bit, but this is to show that you can create the ScrollTrigger separately if you prefer. 
  animation: tl,
  trigger: "#container",
  start: "top top",
  end: "+=4000", 
  scrub: true,
  pin: true,
  anticipatePin: 1
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js
  3. https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b.js