Jump to content
Search Community

SplitText fails

geddski test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm using the SplitText plugin and have run into so many issues. Here is the code I'm using:

 

// split and animate the text
const split = new SplitText(this.refs.message, { type: "chars, lines" });
 
//targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope
TweenMax.staggerFrom(split.chars, 0.2, {
  autoAlpha: 0,
  scale: 3,
  delay: this.props.delay || .3,
  onComplete: () => { } },
  0.022,
  this.typingComplete.bind(this)
)

 

 

1. Performance is terrible, especially when anything else is happening on the page.

 

2. It frequently stops, then janks ahead several words in a very jarring way. 

 

3. It sometimes orphans single letters onto the next line

 

4. It causes horizontal scrollbars when they're not needed

 

 

Anything I can do to solve these issues? 

Link to comment
Share on other sites

Sorry to hear about the trouble. It's very difficult to troubleshoot blind, but it sounds like maybe you're just animating way too many things for the browser to keep up. Typically in cases like this, GSAP is only consuming a tiny portion of the CPU compared to the browser's rendering engine. It'd be helpful to see a reduced test case. Maybe a codepen or jsfiddle?

 

Also, have you tried splitting by words too so that the orphans don't happen? That'd likely solve that problem (because the word <div> would keep stuff together).  

 

If you're trying to animate a ton of letters, you might want to look into a canvas-based solution like Pixi.js for the rendering layer. Use GSAP, of course, for the animation, but I'd be willing to bet that the problem here has nothing to do with GSAP and everything to do with pushing the browser's rendering engine too hard with all those DOM elements. 

  • Like 3
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...