Jump to content
Search Community

How do you set up SplitText Plugin

lgehrig4 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...