Import SplitText on angular

[Men At Code]

Hello. 

I'm importing the Splittext js file, as explain on documentation https://greensock.com/docs/v2/NPMUsage?_fromLogout=1 , on an Angular environment. 

So i've:

• Insert the gsap-bonus package inside src folder
• imported in component using 

  import SplitText from "./gsap-bonus/SplitText";

  It generates this error though: 

  Failed to compile.
  
  ./src/assets/libs/gsap-bonus/SplitText.js Module not found: Error: Can't resolve 'gsap/TweenLite.js' in '/Users/federica/Desktop/menatcode2020-menatcode-landing/src/assets/libs/gsap-bonus'

So i've tried to import the SplitText.js file inside the UMD folder and it doesn't fails to compile but it throws an error on console:

ERROR TypeError: _doc.createElement is not a function
    at _splitRawText (SplitText.js:423)
    at _split (SplitText.js:503)
    at _split (SplitText.js:496)

 

Anyone could help me understand what's missing in the process? 

Thank you in advance

[ZachSaucier]

Hey Federica and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Business Green member!

 

Are you using the v2 version of GSAP? That's the docs that you linked to. 

Most likely you're using the v3 version (as we recommend) in which case you should use the GSAP 3 installation docs.

 

The installation page linked to above goes into more detail, but the basic steps are 

1. Install the .tgz file that contains the Club GreenSock files.
2. Import them. In Angular I believe you'd need the following:

   import { gsap } from "gsap";
   import { SplitText } from "gsap/SplitText";
   
   gsap.registerPlugin(SplitText);

14 minutes ago, Federica said:

It generates this error though: 

Failed to compile.

./src/assets/libs/gsap-bonus/SplitText.js Module not found: Error: Can't resolve 'gsap/TweenLite.js' in '/Users/federica/Desktop/menatcode2020-menatcode-landing/src/assets/libs/gsap-bonus'

It looks like you're trying to load the v2 version of SplitText but are loading the v3 version of GSAP's core? In v3 you don't need anything with Lite/Max in it - you can just load GSAP's core. Make sure you're using the v3 version of SplitText (and any other GSAP plugins) that you can download in the ZIP from your account dashboard.

[Men At Code]

Hello Zach. thank you for the answer.

Unfortunately i'm using the v2 of gsap, cause i'm working on an old project and right now I can't update to v3. 

I've used, as a consequence, the doc procedures of v2, but i get the errors i've listed before. 

[ZachSaucier]

I see. The error is saying that TweenLite (the minimum part of GSAP's v2 core that plugins like SplitText need) isn't being loaded. Are you importing TweenLite or TweenMax in your file before the SplitText import?

 

It'd be helpful for us to see your full imports.

[Men At Code]

import { Component, OnInit } from '@angular/core';
import $ from "jquery";
import { TimelineMax, Power1, Power3 } from "gsap/all"; 
import SplitText from "./../../../assets/libs/gsap-bonus/SplitText";

Here it is

[ZachSaucier]

Ya, you need to import either TweenLite or TweenMax. I recommend TweenMax so you don't have to worry about loading TimelineMax separately (because it's included in TweenMax):

import { Component, OnInit } from '@angular/core';
import $ from "jquery";
import { TweenMax, Power1, Power3 } from "gsap/all"; 
import SplitText from "./../../../assets/libs/gsap-bonus/SplitText";

 

[Men At Code]

Thank you. Actually I decided to upgrade the whole project to version 3, cause it's wonderful 

[sayantan2007]

I am getting the following error

 

Error: Module not found: Error: Can't resolve 'gsap/SplitText'

I am using angular 15 , this is my code , I am getting this error at compile time.

import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(SplitText);

[GreenSock]

Hi @sayantan2007. SplitText is a membership benefit for Club GreenSock ("Shockingly Green" and higher), so it's not in the public downloads/repositories. If you'd like to test it out locally or on CodePen/CodeSandbox/Stackblitz, you can use the gsap-trial NPM package (just don't deploy it on an actual site/domain because it won't work on domains that aren't whitelisted). When you join Club GreenSock, you get access to the completely unrestricted files and a private repo. 

 

 

 

Sign up anytime at https://greensock.com/club