<div class="container">
  <section class="description panel">
    <div>
      <h1>Pair with CSS Scroll Snapping</h1>
      <div class="scroll-down">Scroll down<div class="arrow"></div>
      </div>
    </div>
  </section>

  <section class="panel purple">
    <p>This element will spin.</p>
    <div class="flair flair--20"></div>
  </section>

  <section class="panel solid bg">
    <p>This background color will change</p>
  </section>

  <section class="panel yoyo">
    <p>Yoyo Text!</p>
  </section>
</div>

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  max-height: 100vh;
	overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.panel {
  scroll-snap-align: start;
  height: 100vh;
  flex-direction: column;
  gap: 1
}

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  toggleActions: "restart pause resume pause",
  scroller: ".container"
});

gsap.to(".flair", {
  scrollTrigger: ".purple", 
  duration: 2, 
  rotation: 360
});

gsap.to(".bg", {
  scrollTrigger: {
    trigger: ".bg",
    toggleActions: "restart pause reverse pause"
  }, 
  duration: 1, 
  backgroundColor: "#fffce1", 
  color: "#201f1f", 
});

gsap.to(".yoyo p", {
  scrollTrigger: ".yoyo", 
  scale: 2, 
  repeat: -1, 
  yoyo: true, 
  ease: "power2"
});