CODEWITHSUNDEEP
gsapwebflowscrolltrigger
Mohsin Khan
Mohsin Khan

Reputation: 1

Highlight Text Effect Using SplitType and GSAP not working

I'm working on site in Webflow where I have created a highlight text effect using split-type and GSAP scrollTrigger. I've used it on multiple pages. On the homepage, it's used once and is working fine: https://charlie-number-five.webflow.io/

On internal pages, same effect is used on multiple text blocks and that's where the issue is. It's not working on all the text blocks: https://charlie-number-five.webflow.io/hide-seek

Head Code:

<style>
  .line strong {
    color: #B7C5CE;
  }
  .line {
    color: transparent;
    --line-width: 100%;
    position: relative;
    background-color: #B7C5CE;
    background-image: linear-gradient(
      90deg,
      hsla(201, 19%, 17%, 1),
      hsla(201, 19%, 17%, 1) var(--line-width),
      hsla(201, 19%, 17%, 0) var(--line-width)
    );
    background-clip: text;
  }
</style>

Footer Code:

<script>
  let typeSplit;
  // Split the text up
  function runSplit() {
    typeSplit = new SplitType(
      ".split-lines, .split-lines-case",
      {
        types: "lines, words",
      }
    );
    createAnimation();
  }
  runSplit();
  // Update on window resize
  let windowWidth = $(window).innerWidth();
  window.addEventListener("resize", function () {
    if (windowWidth !== $(window).innerWidth()) {
      windowWidth = $(window).innerWidth();
      typeSplit.revert();
      runSplit();
    }
  });

  gsap.registerPlugin(ScrollTrigger);

  function createAnimation() {
    $(".line").each(function (index) {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top center",
          end: "bottom center",
          scrub: 1,
        },
      });
      tl.from($(this), {
        "--line-width": "0%",
        duration: 1,
      });
    });
  }
</script>

Thanks in advance!

I tried using different classes and removing other libraries like Lenis but no luck. I would to have suggestion on how I should apply the effect on multiple blocks.

Upvotes: 0

Views: 19

Answers (0)

Related Questions