<div class="description panel">
    <div><h1>toggleActions</h1>
      <p>By default, ScrollTrigger simply plays the linked animation when the <code>start</code> scroll position is hit, but it can perform any of the following actions at any of the four toggle points: play, pause, resume, reverse, complete, restart, reset, or none.</p>
      <div class="scroll-down">Scroll down<div class="arrow"></div></div>
    </div>
  </div>


  <section class="panel red">
    <p><span class="line line-red"></span>This line's animation will <strong>play</strong> when it enters the viewport, and then take no other actions after that. It's the default <code>toggleActions: "play none none none"</code></p>
  </section>


  <section class="panel purple">
    <p><span class="line line-purple"></span>This line's animation will <strong>restart</strong> when it enters the viewport then <code>pause</code> when it leaves, <code>resume</code> when scrolled back into view, and finally <code>pause</code> when it leaves again (scrolled all the way back). <code>toggleActions: "restart pause resume pause"</code></p>
  </section>


  <section class="panel orange">
    <p><span class="line line-orange"></span>This line's animation will <strong>play</strong> when it enters the viewport, <strong>complete</strong> when it leaves, <strong>reverse</strong> when you scroll it backwards into the viewport again, and <strong>reset</strong> when you go all the way back past the beginning. <code>toggleActions: "play complete reverse reset"</code></p>
  </section>


  <section class="panel green">
    <p><span class="line line-green"></span>This line's animation will <strong>play</strong> when its top edge hits the center of the viewport (<code>start:&nbsp;"top&nbsp;center"</code>), then it will <strong>pause</strong> 100px from the top of the viewport (<code>end: "top 100px"</code>). Scrolling backward past that point will <strong>resume</strong>, and scrolling all the way back past center will <strong>pause</strong> again. The tween also has an infinite repeat.<br><code>toggleActions: "play pause resume pause"</code></p>
  </section>


<section class="panel">
  <h2>DONE!</h2>
</section>

.line {
  width: 100%;
  max-width: 800px;
  height: 8px;
  margin: 0 0 10px 0;
  position: relative;
  display: block;
  background-color: #585151
}

.panel {
	width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}

.panel.align-top {
  align-items: flex-start;
}

.panel h1 {
  margin: 0 auto;
}
.panel.description {
  padding-bottom: 60px;
}
.panel p, .panel li {
  text-align: left;
  line-height: 1.5em;
  margin: 0.3em 0 1em 0;
}
.panel li {
  margin: 0;
}

h1, h2, p, li {
  max-width: 800px;
}

gsap.registerPlugin(ScrollTrigger);

// --- RED PANEL ---
gsap.from(".line-red", {
  scrollTrigger: ".line-red", // same as scrollTrigger: {trigger: ".line-1", toggleActions: "play none none none", start: "top bottom", end: "bottom top"}
  scaleX: 0, 
  duration: 10, 
  transformOrigin: "left center", 
  ease: "none"
});


// --- PURPLE PANEL ---
gsap.from(".line-purple", {
  scrollTrigger: {
    trigger: ".line-purple",
    toggleActions: "restart pause resume pause"
  },
  scaleX: 0, 
  duration: 10, 
  transformOrigin: "left center", 
  ease: "none"
});



// --- ORANGE PANEL --- 
gsap.from(".line-orange", {
  scrollTrigger: {
    trigger: ".line-orange",
    toggleActions: "play complete reverse reset"
  },
  scaleX: 0, 
  duration: 10, 
  repeat: -1, 
  transformOrigin: "left center", 
  ease: "none"
});

// --- GREEN PANEL ---
gsap.from(".line-green", {
  scrollTrigger: {
    trigger: ".line-green",
    start: "top center",
    end: "top 100px",
    toggleActions: "play pause resume pause"
  },
  scaleX: 0, 
  duration: 10, 
  repeat: -1, 
  transformOrigin: "left center", 
  ease: "none"
});