Jump to content
Search Community

Import SplitText on angular

Men At Code test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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";

 

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 years later...

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

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 

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