Scroll-Animated Text Highlighting with GSAP and ScrollTrigger for Engaging Web Experiences

an HTML document with GSAP (GreenSock Animation Platform) and ScrollTrigger for animating text on scroll. This script animates each character in the .quote element with a red background when it comes into view.
<script src=""> </script>
<script src=""> </script>
.spacer {
height: 80vh;
<div class="spacer"></div>
<h1 class="quote">At vero eos et accusamus et odio dignissimos ducimus qui blanditiis praesentium volupt.</h1>
<div class="spacer"></div>

const quotes = gsap.utils.toArray('.quote');
quotes.forEach((quote) => {
quote.innerHTML = "" + quote.innerText.split("").join("") + "";".char"), {
backgroundColor: "red",
ease: "power4.out",
stagger: 0.03,
duration: 0.1,
scrollTrigger: {
trigger: quote,
start: "top center",
toggleActions: "play none none reverse"