<!--Анимация рукописного текста-->
<!--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>