Make sure to add the class load-container to your section.
HTML Code
<div class="loader">
<svg>
<text x="0" y="-20"
fill="none"
stroke-dasharray="1000"
stroke-dashoffset="1000">
<tspan x="0" dy="100" >WordPress</tspan>
<animate attributeName="stroke-dashoffset"
from="1000"
to="0"
dur="8s"
id="active"
begin="active.begin"
fill="freeze">
</animate>
</text>
</svg>
</div>
CSS Code
/* Adjust for desktop*/
.loader text {
font-family: Spartan;
font-size:5rem;
font-weight: bold;
word-break: break-all;
stroke: #000;
stroke-width: 2px;
line-height: 7rem;
}
.loader svg {
width: 480px;
height: 110px;
}
/* Adjust for tablet */
@media(max-width:1024px){
.loader text {
font-family: Spartan;
font-size:57px;
font-weight: bold;
word-break: break-all;
stroke: #000;
stroke-width: 1px;
line-height: 7rem;
}
.loader svg {
width: 340px;
height: 110px;
}
}
/* Adjust for mobile */
@media(max-width:767px){
.loader text {
font-family: Spartan;
font-size:38px;
font-weight: bold;
word-break: break-all;
stroke: #000;
stroke-width: 1px;
line-height: 7rem;
}
.loader svg {
width: 225px;
height: 110px;
}
}
Javascript Code
<script>
function run_gsap(){
let gsap_loaded = setInterval(function(){
const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
if(window.gsap && window.ScrollTrigger && !eleBuilder){
gsap.registerPlugin(ScrollTrigger);
load_text_stroke();
clearInterval(gsap_loaded);
}
}, 500);
function load_text_stroke(){
const textLoaders = document.querySelectorAll(".load-container");
textLoaders.forEach((textLoader) => {
ScrollTrigger.create({
trigger: textLoader,
onEnter: loader,
onEnterBack: loader,
// once: true,
});
});
function loader() {
document.querySelector("#active").beginElement();
}
}
}
run_gsap();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>
