<div class="box purple a">a</div>
<div class="box green b">b</div>
<!-- <div class="box ghost">c</div> -->
<!-- <div class="box orange c">c</div> -->



<div class="line"></div>

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

.box.active {
  outline: 5px dashed var(--color-surface-white);
}


body {
  background-color: var(--color-just-black);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  z-index: 100;
}

.a {
  top: 200px;
}

.b {
  top: 800px;
}

.c {
  top: 1000px;
}

.ghost {
  top: 1000px;
  background-color: #444;
}

.line {
  width: 2px;
  height: 3000px;
  position: absolute;
  left: 600px;
  top: 0px;
/*   visibility: hidden; */
  background-color: #777;
}

// For more information, see greensock.com/docs/v3/Plugins/ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// You can use a ScrollTrigger in a tween or timeline
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".b",
    start: "top bottom",
    end: "bottom top",
    scrub: true,
    markers: true,
    id: "scrub"
  } 
})
tl.to(".b", {
  duration: 1,
  x: 400,
  rotation: 360,
})
.to(".b", {
  duration: 2,
  scale: 2
});


// // Or you can attach a tween or timeline to a ScrollTrigger later
// const anim = gsap.to(".c", {
//   x: 400,
//   rotation: 360,
//   duration: 3
// });

// ScrollTrigger.create({
//   trigger: ".c",
//   animation: anim,
//   // Uncomment these to see how they affect the ScrollTrigger
//   // markers: true,
//   start: "top center",
//   end: "top 100px",
//   toggleClass: "active",
//   // pin: true,
//   // scrub: 1,
//   // onUpdate: self => {
//   //   console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());
//   // }
// });



// 💚 This just adds the GSAP link to this pen, don't copy this bit
import { GSAPInfoBar } from "https://codepen.io/GreenSock/pen/vYqpyLg.js"
new GSAPInfoBar({ link: "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"});
// 💚 Happy tweening!