Men At Code Posted July 15, 2020 Share Posted July 15, 2020 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 More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 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 Install the .tgz file that contains the Club GreenSock files. 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 More sharing options...
Men At Code Posted July 15, 2020 Author Share Posted July 15, 2020 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 More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 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 More sharing options...
Men At Code Posted July 15, 2020 Author Share Posted July 15, 2020 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 More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 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 More sharing options...
Men At Code Posted July 23, 2020 Author Share Posted July 23, 2020 Thank you. Actually I decided to upgrade the whole project to version 3, cause it's wonderful 1 1 Link to comment Share on other sites More sharing options...
sayantan2007 Posted April 17, 2023 Share Posted April 17, 2023 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 More sharing options...
GreenSock Posted April 17, 2023 Share Posted April 17, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now