ReferenceError: SplitText is not defined

[tgczan]

I have used several GSAP plugins now with no problems. Yet, SplitText continues to be undefined somehow. I've tried all the obvious solutions:

- checking basic typos/mispellings

- copied code directly from the Doc

- loaded GSAP js files as local files

- called said files in <script> in index.html

- <script> lines follow order of gsap.min.js -> [plugin].js -> script.js

 

Other plugins (like ScrambleText, for example), have worked just fine with this setup. SplitText is the only one throwing up this basic error. What am I missing?

 

I have made a replication of the problem here:  [deleted]

 

You'll see that the page loads and will scramble the text as expected. If you uncomment the SplitText line (line 10), you'll see the undefined error in the console. As you can see, both ScrambleTextPlugin.min.js and SplitText.min.js are located in the same folder and are declared in index.html at the same time. Why are they behaving differently?

[GreenSock]

It looks like that's a problem with the playcode.io environment - if you console.log(this) in the SplitText or ScrambleTextPlugin file, you'll see that it's a module rather than the window object itself. If you just try running the same HTML/JS outside the playcode.io environment, you'll see that "this" refers to the window. That's what SplitText gets defined on, like this.SplitText = SplitText. So in the playcode.io environment, that's not the window, thus you can't reference it globally. 

 

It looks like in the playcode.io environment, you can load it as if it's a module instead, like: 

import {SplitText} from "../src/SplitText.min.js";

The only reason ScrambleTextPlugin appeared to work is because when it loads, it checks to see if gsap is defined globally and if so, it'll call gsap.registerPlugin() to register itself automatically. You were never actually referencing ScrambleTextPlugin anywhere in your code - if you tried, you'd see exactly the same error. 

 

Side note: I deleted the link in your post because you were basically giving the whole world free access to members-only plugins 😯

[tgczan]

Really appreciate the explanation.

 

I was blindly guessing at solutions and got quite close, but unfortunately not close enough. Thank you for the help.