Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How do you set up SplitText Plugin

Recommended Posts

I guess this applies to any of the plugins. I'm fairly new to coding and only recently learned about GSAP. I signed up for the Shockingly Green plan and downloaded the file with the plugins. I've followed a few tutorials and have used CDNs only up to this point. All the splittext tutorials I've found are done on CodePen. 


How do I set this up? I inserted the SplitText.js file into my project file and use an HTML script tag, but get this message in the console referring to line 15 of this file:


Uncaught SyntaxError: Cannot use import statement outside a module


Sorry for the newbie question, but all the lessons/documents skip this part and go straight 'how to use it' after it's installed

Share this post

Link to post
Share on other sites

First of all, thanks for joining Club GreenSock, @lgehrig4


It sounds like maybe you're using the ES Module file in a standard <script> tag, but in your environment it'd be best to just use the one from the "minified" folder in your downloads. For context:

  • We provide several versions of each plugin for maximum compatibility. 
  • Some people want to use ES modules in their build system, so that's the "ESM" stuff, or the bonus stuff that's in "bonus-files-for-npm-users" folder. 
  • If you want to use an ES Module file in the browser, you must set type="module" in your script tag, like <script type="module"> and then put import statements in there, but if that doesn't make much sense to you don't worry - just avoid the ES module files (you don't NEED them, we just provide them for people who prefer those)
  • Again, for a standard <script> tag, simply point to the SplitText.min.js file from the "minified/utils/" folder in the zip. 

Does that help? 


Happy tweening!

  • Like 2

Share this post

Link to post
Share on other sites

Worked perfectly! Thanks for the answer and the additional context. Still have got a lot to learn

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.