Andy1708

React and SplitText

Recommended Posts

Hello, 

i have this problem with react and splitText...

I have replace all the files in the gsap/node_modules from my 'bonus-files-for-npm-users'

and import like this :

import {TweenMax, Sine, SplitText, ease, Back} from 'gsap';

 

 

How can i fix it ?

thanks

Yves

 

 

screen.thumb.jpg.54e858293ea22d4f4de40dac4afe2f93.jpg

Share this post


Link to post
Share on other sites

SplitText is a separate module. Please try this.

import SplitText from "gsap/SplitText";

 

  • Like 4

Share this post


Link to post
Share on other sites

I'm also using GSAP with npm, and I'm not sure how to set up the SplitText utility. I deploy to Netlify and netlify runs my build command, and installs all of my npm packages. I'm guessing I'll need to include SplitText.js in my file structure, and maybe include it in my package.json somehow? Any pointers would be appreciated!

 

Alan

Share this post


Link to post
Share on other sites

Hi @ason. Sorry, I've never heard of Netlify and obviously have zero experience with it, so I'm not quite sure how to advise you. But it does seem like you'd need to include SplitText in your file structure, yes, as if it's one of your JS files (not an NPM-based package). Wish I had Netlify-specific answers for ya. 

Share this post


Link to post
Share on other sites

Thanks! I think I have the import working correctly now. I've included SplitText.js in my utils folder and am just importing like any other file in my project, after other gsap dependencies. 

 

I'm using the "word" split type, but is it possible to have SplitText split based on hairline spaces, as well as regular spaces? I saw that SplitText respects non-breaking spaces, it would be awesome if there was a way to tell it to split on hairline spaces as well!

 

Thanks for your help!

 

 

Share this post


Link to post
Share on other sites

Glad you got the import(s) working. 

 

As for splitting on something other than spaces, you can define a wordDelimiter if you'd like. See the docs: https://greensock.com/docs/Utilities/SplitText (not sure if that's exactly what you're looking for, but it's the closest I can get :) )

Share this post


Link to post
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.