GSAP Text Stroke Animation In Elementor Pro

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on whatsapp
WhatsApp

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>
				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

Elementor Text Over Image Section On Hover

https://youtu.be/jf6w5aXFOjI CSS Code selector{ height: 300px; overflow: hidden; } selector .inner-box__hover-box{ height: 100%; display: flex; align-items: center; } selector .learn-btn{ transform: translateY(35px);

Add text over Image on Hover in Elementor Pro WordPress

https://youtu.be/jf6w5aXFOjI CSS Code selector{ height: 300px; overflow: hidden; } selector .inner-box__hover-box{ height: 100%; display: flex; align-items: center; } selector .learn-btn{ transform: translateY(35px);

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.