Подсвечивание текста

<style>
:root {
/*Настройки*/
--SpeedText: 0.2s; /*скорость анимации (чем меньше значение, тем выше скорость)*/
--BackgroundColorTextAnimation: #dadada; /*цвет заднего фона (ставьте значение, что и фон сайта)*/
--OpacityText: 0.8; /*прозрачность текста, до закрашивания*/
}
/*Ниже не трогать*/
.line {
position: relative;
}
.line-mask {
position: absolute;
top: 0;
right: 0;
background-color: var(--BackgroundColorTextAnimation);
opacity: var(--OpacityText);
transition-duration: var(--SpeedText);
height: 100%;
width: 100%;
z-index: 2;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
$('.highlight .tn-atom').addClass("split-mt");
let typeSplit;
function runSplit() {
typeSplit = new SplitType(".split-mt", {
types: "lines, words"
});
$(".line").append("
");
createAnimation();
}
runSplit();
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
if (windowWidth !== $(window).innerWidth()) {
windowWidth = $(window).innerWidth();
typeSplit.revert();
runSplit();
}
});
gsap.registerPlugin(ScrollTrigger);
function createAnimation() {
$(".line").each(function (index) {
let tl = gsap.timeline({
scrollTrigger: {
trigger: $(this),
start: "top center",
end: "bottom center",
scrub: 1
}
});
tl.to($(this).find(".line-mask"), {
width: "0%",
duration: 1
});
});
}
</script>