<section class="panel">
    <h1>Basic Tweening</h1>
    <div class="scroll-down">Scroll down<div class="arrow"></div>
</section>

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

  <section class="panel border bg">
    <h3>This background color will change</h3>
  </section>

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

/* this demo has external styles added in the settings */
/* https://codepen.io/GreenSock/pen/xxmzBrw */

.panel {
  flex-direction: column;
}

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  toggleActions: "restart pause resume pause",
  markers: true
});

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"
});