Can't get SplitText to work

[cerealbeast]

Hi, I just purchased Shockingly Green so that I can use Split Text on my site, but I'm having trouble installing it.

 

I'm using Wordpress, I have uploaded the minified SplitText.js file into a new folder called GSAP in the 'public_html' folder. Then I have added a script tag in an HTML document with all my other script tags.

<script src="[REDACTED]"></script>

I am getting this error in the console: 
GET [REDACTED] net::ERR_ABORTED 404

 

If anyone can help me get this working that would be amazing!

 

 

[GreenSock]

First of all, thanks for joining Club GreenSock! 💚 🥳

 

It looks like you're just pointing to an invalid path. In other words, if you just paste that path into the browser address bar, you'll see that there is no file at that location. You need to fix that. From what I can tell, just remove the "/wp-content/" from the address. I deleted the address in your original post because you were basically giving the entire world a direct pointer to a members-only plugin so they could snag it from you without joining Club GreenSock properly

 

Good luck!

[cerealbeast]

Ahh sorry about that! I have amended the url and I'm still getting the same error.

 

I also have this error:

Uncaught ReferenceError: SplitText is not defined

 

Here is my code (Im using elementor so have to include additional code beforehand to get it working). The error is pointing at the following line

gsap.registerPlugin(SplitText);

jQuery(document).ready(function($) {

;(function(){
    let chck_if_gsap_loaded = setInterval(function(){
			const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
       if(window.gsap && window.ScrollTrigger && !eleBuilder){
           gsap.registerPlugin(ScrollTrigger);
		   gsap.registerPlugin(SplitText);
            text_reveal();
            clearInterval(chck_if_gsap_loaded);
        }
    }, 500);

function text_reveal(){
	
const splitLines = new SplitText(".split-me p", {
  type: "lines",
  linesClass: "line line++"
});

jQuery(".split-me .line").wrap('<div class="line-wrapper">');

gsap.utils.toArray(".line").forEach((el) => {
  gsap.from(el, {
    yPercent: 200,
    duration: 1,
    ease: "power4",
    scrollTrigger: {
      trigger: el,
      start: "top 60%"
    }
  });
});
};	
})();
	});

 

[GreenSock]

Yeah, if you're not successfully loading SplitText before that code executes, that would certainly explain why you're getting that error. So you should make absolutely sure that you're successfully loading SplitText first. And it must load before your code that tries to use SplitText. For example:

 

<!-- BAD! --> 
<script>
  gsap.registerPlugin(SplitText); //<-- doesn't exist yet! (hasn't loaded)
  ...
</script>
<script src="../SplitText.min.js"></script>


<!-- GOOD --> 
<script src="../SplitText.min.js"></script>
<script>
  gsap.registerPlugin(SplitText);
  ...
</script>

 

[cerealbeast]

Got it working, just had to amend the URL slightly again. Thanks!