There is no TextPlugin.splitText()?

[debotos]

I am trying to run simply something like,

import { TweenMax, TimelineMax, TextPlugin } from "gsap/all";

const splitText = TextPlugin.splitText(textElement, {
      type: "chars words"
});

console.log(splitText);

But seems that there is no '.splitText()' method but all the tutorials out there shows something like 'new SplitText()'

Is the splitText method comes from some other lib/CDN? I am doing something wrong. Please correct me.

[ZachSaucier]

Hey debotos.

First off, we recommend using the install helper on the installation page for learning how to import and register GSAP. If you use the GSAP 3 formatting then you don't have to import TweenMax or TimelineMax, just gsap.

You also seem to be loading the TextPlugin whereas you should be loading the SplitText plugin. Since SplitText is a Club GreenSock plugin (Shockingly Green or above) you will need to get a Club GreenSock membership before you can use it in your projects locally. You can always try it and all of the other Club GreenSock plugins for free on CodePen. SplitText and the other Club GreenSock plugins are not found in any CDN because they are meant for club members only.

Once you've obtained a Club GreenSock membership and imported the club files (this video shows how to do so), I recommend using the following to import SplitText and register it:

import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(SplitText);

Then you can use SplitText. The proper formatting can be seen below. For more information see the SplitText docs.

var tl = gsap.timeline(), 
    mySplitText = new SplitText("#quote", {type:"words,chars"}), 
    chars = mySplitText.chars; //an array of all the divs that wrap each character

gsap.set("#quote", {perspective: 400});

tl.from(chars, {duration: 0.8, opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:"back", stagger: 0.01}, "+=0");

[debotos]

Hey @ZachSaucier

Thanks a lot for this detailed explanation. Now I am fully clear.