Jump to content
Search Community

How to register and use SplitText plugin?

bdrtsky test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 2 years later...

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!!!

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

hi Guys.

I am a total lame, and trying to install the Splittext plugin that I recently purchased in a Shockingly Green plan.

I am makeing simple html5 banners, so I want to use this plugin as a simple plugin without any framework. (And I still use GSAP 2.0)

Can anybody help me how to do it?

thansk in avance

 

Link to comment
Share on other sites

Welcome to the club, @HighVoltage! Thanks for joining. 

 

Are you saying you want to use the most recent SplitText (for GSAP 3) with a super old GSAP 2 engine? If so, do you mind me asking why? GSAP 3 is better in every way. Smaller, simpler syntax, cleaner code, etc. 

 

It's always best to provide a minimal demo if you can (like a CodePen). Are you saying that you're having a hard time knowing how to load SplitText with a <script> tag or something? Sorry, I'm just a bit fuzzy on exactly what you're asking here. 

Link to comment
Share on other sites

hi.

my code and banner templates are in gsap 2.0, I did not  updated them to 3.0, and this job what I need splitext is just poped in.

So I want to register splittext.

Ok, I can use it whit 3.0 if it is a must.

But how I can use splittext without a framework? And how can I register it? I just found an nom registering but I dont use any framework.

thanks

Link to comment
Share on other sites

Oh, you definitely don't need to use any framework. GSAP is completely framework-agnostic. Use it with vanilla or any framework. (Secretly I kinda hate frameworks anyway...shhh).

 

Registering it should be as simple as loading the SplitText.min.js file and then doing gsap.registerPlugin(SplitText). That's it! And yes, I'd highly recommend migrating to GSAP 3. See

 

If you're still having trouble, please make sure you provide a minimal demo. Here's a CodePen that loads every plugin, so you can just fork it: 

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

  • Like 1
Link to comment
Share on other sites

GSAP 3 plugins don't work with GSAP 2 (in general). GSAP 3 was a complete rewrite. 

 

If you have to use GSAP 2, I suppose you could download the very old/archived file from your account dashboard and use the SplitText file from in there, but I cannot emphasize strongly enough how much I recommend using the latest version. We've done so many improvements over the years, worked around browser bugs, etc. It feels very odd for someone to be using GSAP 2 from so many years ago. :)

 

In your account dashboard, the link says "GSAP 2 with Shockingly Green bonus (2.1.3)"

  • Like 1
  • Thanks 1
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...