How to register and use SplitText plugin?

[bdrtsky 32 Likes (Newbie)]

First of all I am really frustrated that I had to spend so much time figuring out how to use PAID plugins. Sorry, but I am really frustrated, so I will speak about this.

 

Second, was it so hard to put clear documentation in SplitText chapter how to freaking install it???

 

So I am trying

 

import { gsap } from 'gsap'
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { SplitText } from 'gsap/SplitText'
gsap.registerPlugin(MorphSVGPlugin)
gsap.registerPlugin(ScrollTrigger)
gsap.registerPlugin(SplitText)

And what next??? It doesnt exist in window, and it doesnt exist in gsap property. Holy crap, guys. Why this need to be so ugly and confusing.

[ZachSaucier 7,118 Likes (Superhero)]

Hey bdrtsky. Sorry to hear about the troubles that you're having. 

 

Can you please provide more information about your setup? Are you using a framework like React? If so which one? Any other tools that we should be aware of (like Nuxt or something)? What error(s) is it showing? It's hard to help without knowing anything about what's wrong.

 

Have you already tried using the install helper and watching the video showing how to install GSAP using modules?

 

So long as you properly installed GSAP via the .tgz file, as instructed in the install page and the install video, and your tools work with ES Modules the above code that you have should work. 

[bdrtsky 32 Likes (Newbie)]

Yes, I am using Nuxt. For now I ended up with injecting `SplitText` along with `gsap` in context. Can't find other way to use it globally. 

[ZachSaucier 7,118 Likes (Superhero)]

Have you already read through this thread? 

 

 

[bdrtsky 32 Likes (Newbie)]

Yes I read it, it doesnt answer how to make SPlitText accesible in components.

[ZachSaucier 7,118 Likes (Superhero)]

You need to import GSAP and all plugins you're going to use in each component in which you want to use them in. That's standard.

[Joseph chimebuka 0 Likes (Newbie)]

Is the GSAP SplitText featured a paid feature I need to know so that I can know what to do next

[Rodrigo 4,818 Likes (Superhero)]

Hello @Joseph chimebuka and welcome to the GreenSock forums!

 

Indeed the SplitText plugin is a Club Greensock members benefit:

https://greensock.com/club/

 

To learn more about it take a look at SplitText's page:
https://greensock.com/club/

 

And this collection of nice samples:

https://codepen.io/collection/XMoeqD

 

Finally in order to make an informed decision you can have a test run of all the plugins and tools from Club GreenSock by forking this Codepen:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Now, if you prefer to work on your local environment, you can install the gsap-trial package as well:

https://www.npmjs.com/package/gsap-trial

 

Happy Tweening!!!