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

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

.line {
  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(".line", {
  scrollTrigger: {
    trigger: ".line",
    scrub: true,
    start: "top bottom",
    end: "top top",
    markers: true
  },
  scaleX: 0,
  transformOrigin: "left center",
  // 移动的圆点从长度: left, 高度: 中
  ease: "none"
  // 去掉默认的速度函数
});