Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tlemaitre27

Split Text Js doesn't split my text by line correctly

Recommended Posts

Hi!
I have an animation that reveal my texts line by line with SplitTextJs. The problem I have is that I have my paragraphs that are splited line by line but my lines wraps so one line is now 2 lines 

image.thumb.png.50ad289b38816306bf411255a55c00eb.png

It happen mostly when I refresh the page without the cache. On my codepen I need to refresh more than once without the cache to get the problem. Also, sometimes I have a problem with the split when I have some words in italic or in a span.

 

Thank you!

See the Pen mdJEBxE by tlemaitre (@tlemaitre) on CodePen

Link to comment
Share on other sites

Hey tlemaitre27 and welcome.

 

This is likely because your font hasn't been loaded before you're trying to run SplitText. As the SplitText docs say,

Quote

The element of text should be displayed exactly as you want it to be at the end of your animation before you split it. In other words, the split element should be displayed on the page (having visibility: hidden or opacity: 0 is fine) and be sized like it will be when you want the split animation to run when you call SplitText.

So make sure you run SplitText after the font has been loaded. Otherwise SplitText can have no idea how the lines will be split.

Link to comment
Share on other sites

Thank you, I thought It was that but I wasn't sure, but what about the glitch when I have some words in italic (with the tags <i></i>) or span? Also, I don't know why, but my outerSplitP.lines is not set to overflow: hidden until the animation is triggered

Link to comment
Share on other sites

5 minutes ago, tlemaitre27 said:

my outerSplitP.lines is not set to overflow: hidden until the animation is triggered

You have paused: true on your timeline that it's on. If you want it to apply it immediately, use a regular tween:

gsap.set(outerSplitP.lines, {
  overflow: 'hidden'
})
el.tlp = gsap.timeline({
  paused: true,
  onComplete: () => {
    //outerSplitP.revert()
    //innerSplitP.revert()
  }
})
.from(innerSplitP.lines, {
  duration: 1,
  yPercent: 100,
  ease: 'expo',
  stagger: 0.1
});

 

5 minutes ago, tlemaitre27 said:

what about the glitch when I have some words in italic (with the tags <i></i>) or span?

What do you mean glitch?

Link to comment
Share on other sites

Thank you for the tip

 

Quote

What do you mean glitch?

I have a dot in a single line in my codepen

Link to comment
Share on other sites

15 hours ago, tlemaitre27 said:

I have a dot in a single line in my codepen

This is related to you trying to split nested elements and those nested elements wrapping. There are some cases where nested elements, even if they're inline, are especially hard to know where the splits should go. In this case, when then <i> is split across two lines, SplitText doesn't know where to put the dot. Here's a demo that shows the issue more clearly:

See the Pen gOpwRvo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If the <i> doesn't wrap this issue won't occur. So in light of that, you could adjust the font size, adjust the max-width, add some text, or remove some to where this happens less. Alternatively, just include the period inside of the <i> :) 

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.

×