Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Men At Code

Import SplitText on angular

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

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.

Link to comment
Share on other sites

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

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

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

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