<p>let animHeadingPara = document.querySelectorAll(&#8216;.dm-heading&#8217;)</p>
<p>  animHeadingPara.forEach((headingElement, index) =&gt; {<br />
  let splitHeading = new SplitType(headingElement.querySelector(&#8216;h2&#8217;), { types: &#8216;words&#8217; });<br />
  let splitParagraph = new SplitType(document.querySelectorAll(&#8216;.dm-paragraph&#8217;)[index].querySelector(&#8216;p&#8217;));</p>
<p>  let headingParaTimeline = gsap.timeline({<br />
    scrollTrigger: {<br />
      trigger: headingElement,<br />
      scroller: &#8216;body&#8217;,<br />
      start: &#8216;top 80%&#8217;<br />
    }<br />
  });</p>
<p>  headingParaTimeline<br />
    .from(splitHeading.words, {<br />
      y: 30,<br />
      opacity: 0,<br />
      duration: 0.3,<br />
      stagger: 0.1<br />
    })<br />
    .from(splitParagraph.lines, {<br />
      y: 30,<br />
      opacity: 0,<br />
      duration: 0.3,<br />
      stagger: 0.1<br />
    }, &#8220;-=0.2&#8221;); // overlap the animations slightly for a smoother effect<br />
});</p>