I'm using GSAP Scrolltrigger to animate the text on scroll

Design help Custom code
1

@

So I’m using GSAP Scrolltrigger to animate the text on scroll, so if you refer to the design image, you’ll understand how the design should look but when I publish my site, the padding on left side of the word “Duration…” “Stop…” and “Back…” is not showing…

Here is the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

  const splitTypes = document.querySelectorAll('.reveal-type');
  splitTypes.forEach((element) => {
    const text = new SplitType(element, { types: ['chars', 'words'] });

    // Find the important words and set their padding
    const importantWords = text.words.filter(word => word.classList.contains('important-word'));
    importantWords.forEach(word => {
      gsap.set(word, { paddingLeft: '2rem' });
    });

    gsap.from(text.chars, {
      opacity: 0.2,
      stagger: 0.5,
      scrollTrigger: {
        trigger: element,
        start: 'top 80%',
        end: 'bottom 50%',
        scrub: true,
        markers: false
      },
    });
  });
</script>

Text image
Text image1220×1222 42 KB

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

2

Are you aware that GreenSock has forums dedicated to helping people using the product?