Código CSS 1
selector path{
fill: rgba(255 255 255 / .2);
stroke: white;
stroke-width: 1px;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: textAnimation 4s forwards
}
@keyframes textAnimation{
80{
fill: rgba(255 255 255 / .2);
}100%{
fill: rgba(255 255 255 / 1);
stroke-dashoffset: 0;
}
}
Código CSS Hover
selector path{
fill: rgba(255 255 255 / .2);
stroke: white;
stroke-width: 1px;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}
selector svg:hover path{
animation: textAnimation 4s forwards
}
@keyframes textAnimation{
80{
fill: rgba(255 255 255 / .2);
}100%{
fill: rgba(255 255 255 / 1);
stroke-dashoffset: 0;
}
}
Código CSS Scroll GSAP
selector path{
fill: rgba(255 255 255 / .2);
stroke: white;
stroke-width: 1px;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}
Código JS Scroll GSAP
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
let path = document.querySelector("path");
let containerPai = document.querySelector(".containerPai");
gsap.to(
path,
{
strokeDashoffset: 0,
fill: "rgba(255 2552 255 / .8)",
scrollTrigger: {
trigger: containerPai,
start: "top top",
end: "bottom bottom",
scrub: 1,
}
}
);
</script>
