GSAP Text Stroke Animation In Elementor Pro

Facebook
Twitter
Reddit
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

How To Make a Hover Card Like a PRO in Elementor

https://youtu.be/pja-7Sfn8WI CSS selector .card-content{ height: 56%; margin-bottom: -134px; transition: all 0.5s ease; } selector .card-wrapper:hover .card-content{ margin-bottom: 0px; height: 100%; } selector

Elementor Button Border Gradient Tutorial

https://youtu.be/I9am2K_yopc Border Gradient Button CSS selector .elementor-button{ position: relative; overflow: hidden; z-index: 1; margin-bottom: -15px } selector .elementor-button:before{ content: ”; position: absolute;

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

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.

Hello!

Enter your question below and a representative will get right back to you.

Speak to a team member
Leave us a review
Hi there, have a question? Text us here.