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

<!--<div class="box4" style="width: 50px;height:40px;border:2px solid red"></div>-->

<!--<div class="box11" style="width: 90vw;height: 50vh;border:2px solid red">-->
<!--  <div class="box5"  style="width: 50px;height:200px;border:2px solid red"></div>-->
<!--</div>-->
<!--<div class="box5" style="width: 500px;height:40px;border:2px solid red"></div>-->
<!--<div class="box" style="border:2px solid khaki"></div>-->
<!--<div class="line"></div>-->

<!--&lt;!&ndash;<div style="height: 100vh;"></div>&ndash;&gt;-->

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

<!--</div>-->

<div class="purple" style="height: 100vh;background-color: deeppink;">
  <p style="margin:100px;width: 900px;">
    <span class="line3"></span>

  This panel gets pinned in a similar way, and has a more involved animation that's wrapped in a timeline, fading the
  background color and animating the transforms of the paragraph in addition to the line, all synced with the scroll
  position perfectly.
  </p>
</div>

.line,.line2,.line3{
  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);

  var tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".purple",
        scrub: true,
        pin: true,
        start: "top top",
        end: "+=100%"
      }
    });

    tl.from(".purple p", {scale: 0.3, rotation:45, autoAlpha: 0, ease: "power2"})
      .from(".line3", {scaleX: 0, transformOrigin: "left center", ease: "none"}, 0)
      .to(".purple", {backgroundColor: "#28a92b"}, 0);