Animated Heading

				
					<p>let animHeadingPara = document.querySelectorAll(‘.dm-heading’)</p>
<p>animHeadingPara.forEach((headingElement, index) =&gt; {<br />
let splitHeading = new SplitType(headingElement.querySelector(‘h2’), { types: ‘words’ });<br />
let splitParagraph = new SplitType(document.querySelectorAll(‘.dm-paragraph’)[index].querySelector(‘p’));</p>
<p>let headingParaTimeline = gsap.timeline({<br />
scrollTrigger: {<br />
trigger: headingElement,<br />
scroller: ‘body’,<br />
start: ‘top 80%’<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 />
}, “-=0.2”); // overlap the animations slightly for a smoother effect<br />
});</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>