Анимация рукописного текста

<!--Анимация рукописного текста-->
<!--https://mt-webdesign.ru/handwritten-->
<svg data-v-2100d41e="" width="600" height="240" viewBox="0 0 600 240" fill="none" xmlns="http://www.w3.org/2000/svg" class="hand-drawing-svg-1">
<mask data-v-2100d41e="" id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="240">
<path data-v-2100d41e="" d="" fill="white"></path>
</mask><g data-v-2100d41e="" mask="url(#mask1)" id="svg_color_1" ><path data-v-2100d41e="" d="" stroke="#BB3D15" stroke-opacity="1.0" stroke-width="14" class="hand-drawing-path">
</path></g></svg>

<!--Анимация рукописного текста-->
<!--https://mt-webdesign.ru/handwritten-->
<!--Библиотеки для триггера-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js"></script>
<style>
.text-line .hand-drawing-svg-1 {
opacity:0;
}
#svg_color_1 path {
stroke: #fff; /*меняем цвет текста*/
}
.text-line-anim .hand-drawing-svg-1 {
overflow: visible;
opacity:1;
stroke-dasharray: 3000; /*длина линии*/
stroke-dashoffset: 3000; /*длина линии*/
animation: text-line-anim 10s linear forwards; /*продолжительность анимации*/
}
@keyframes text-line-anim {
to {
stroke-dashoffset: 0;
}
}
</style>
<script>
ScrollTrigger.create({
trigger: ".trigger", /*класс триггера для старта анимации*/
markers: false,
start: "top center",
end: "top top",
onEnter: () => setTimeout(() => myfunction_1(), 200), /*задержка перед анимацией*/
// onLeaveBack: () => setTimeout(() => myfunction_2(), 200),
});
function myfunction_1() {
$('.text-line').addClass("text-line-anim"); /*класс текста с анимацией*/
};
// function myfunction_2() {
// $('.text-line').removeClass("text-line-anim");
// };
</script>