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


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>

  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

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

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