<div style="height: 100vh;"></div>

<div style="height: 100vh;background-color: lightpink;" class="box2">
  <div class="line2"></div>

</div>

.line2 {
  width: 100%;
  max-width: 800px;
  height: 8px;
  margin: 0 0 10px 0;
  position: relative;
  display: inline-block;
  background-color: rgb(200, 130, 130);
}

gsap.registerPlugin(ScrollTrigger);

gsap.from(".line2", {
  scrollTrigger: {
    trigger: ".box2",
    scrub: true,
    pin: true, // 在.box2的外层的盒子加个盒子`.pin-spacer`
    start: "top top",
    end: "+=100%",
    markers: true
  },
  scaleX: 0,
  transformOrigin: "left center",
  ease: "none"
});