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

Create a Custom Mobile Menu Drop Down In Elementor Pro

CSS /*Tablet breakpoint*/ @media(max-width:1024px){ /*Mobile nav column */ #nav-container{ display:none; overflow:hidden; } /*Switch nav widget to verticle on mobile */ .elementor-nav-menu–layout-horizontal .elementor-nav-menu

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

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.