GSAPでスクロールして表示されたらテキストに下線(マーカー)を引く方法【複数行対応】

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

    <!-- GSAP CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <!-- GSAP ScrollTrirrer CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <!-- 自作JSファイル(GSAPより後に書く) -->
    <script src="js/main.js"></script>
  </body>
</html>

<div class="container">
  <p class="text">
    初めまして、<span class="marker">犬が大好きな犬専門カメラマンをやっていた戌年生まれのじゅんぺい</span>です🐶
  </p>
</div>

/* マーカーのスタイル */
.marker {
  background-image: linear-gradient(90deg, #ff9e9e, #ff9e9e); /* 線の色 */
  background-position: left bottom; /* 線の起点を左・下に設定 */
  background-repeat: no-repeat;
  background-size: 0 .5em; /* 線の横幅を0、縦幅を0.5emに */
  padding-bottom: 3px; /* 下線を下にズラす */
  transition: background-size 1.5s; /* 線を伸ばすアニメーション実行時間を指定 */
}
/* マーカーが表示された時のスタイル */
.marker.active {
  background-size: 100% .5em; /* 線の横幅を100%にする */
}

gsap.to(".marker", {
  scrollTrigger: {
    trigger: ".marker", // アニメーションが始まるトリガーとなる要素
    start: "top center", // アニメーションが始まる位置
    toggleClass: {
      targets: ".marker", // クラスを切り替える対象の要素
      className: "active", // クラス名 "active" を付け外し
    },
  },
});

gsap.to(".marker", {
  scrollTrigger: {
    trigger: ".marker", // アニメーションが始まるトリガーとなる要素
    start: "top center", // アニメーションが始まる位置
    toggleClass: {
      targets: ".marker", // クラスを切り替える対象の要素
      className: "active", // クラス名 "active" を付け外し
    },
    once: true, // 1回のみ動作
  },
});

.marker {
  background-image: linear-gradient(90deg, 色, 色);
}

.marker {
  background-image: linear-gradient(90deg, 前半の色, 後半の色);
}

.marker {
  background-image: linear-gradient(90deg, 色①, 色②, 色③);
}