Jump to content
Search Community

SplitText revert() bouncing

VSDC 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

Hi, 

 

i´ve got a problem with SplitText which i just can´t figure out.
As you can see here: 

See the Pen ZedMzB%C2%A0 by VSDC (@VSDC) on CodePen


there is a simple SplitText animation which gets revert() when the animation is done.
As the text gets revert it makes a litte jump/bounce. 
This effect is even stronger when i use webfonts from TypeKit (even after waiting until the font is loaded, before rendering the Timeline).

Am i missing something obvious?
Thanks a lot for your help!

See the Pen ZedMzB by VSDC (@VSDC) on CodePen

Link to comment
Share on other sites

HI VSDC  :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

Thanks for the clear demo and I'm sorry to hear that you're experiencing some issues.

 

I'm assuming you are referring to the 'TE' at the end of 'CORPORATE' making a little horizontal shift when the text splits and reverts? It looks to me like it's occurring when the letter 'T' follows an 'A'. I tried it with other words and letter combinations and didn't see that shift. That has me a bit puzzled too. We may have to kick this one upstairs to Jack or Carl. Forum activity is a bit slow on the weekends so there may not be an immediate answer, but we'll see what we can find out for you.

 

Just an FYI - you are using an older version of SplitText on your pen. You can find all the latest CodePen safe Club plugins here:

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

This doesn't have anything to do with the issue you're seeing, but it's always good to have the latest updated plugins in your demos.

 

Stand by and we'll see what we can find out for you.

 

Happy tweening and welcome aboard.

:)

  • Like 1
Link to comment
Share on other sites

Hi vsdc,

 

Welcome to the forums and thanks for the demo.

When your text is split, SplitText wraps each character in a div with display:inline-block;

 

 

It appears in your case the browser is doing some special kerning to make the A and T overlap. See this screen shot with the font-size set to 120px

188ac9e945db4c80ae4afbe18e5e9d6e.png

notice how much of the A is in the T's space (or bounding box).

 

Once the text gets split, each letter is in its own div and they all flow very close to each other but don't overlap (borders turned on via css)

 

a6aec0d86d2143c09947da392fc0f4b1.png

 

SplitText does not use any custom kerning algorithms to accommodate for this, and I'm not sure how feasible that would be since each browser probably does its own thing and I'd imagine each font would be different.

  • Like 2
Link to comment
Share on other sites

Good explanation Carl. :)

 

I wondered about the bar in that 'T' overlapping the 'A' too. I tried some big letter-spacing hoping it would go away, but got the same result though so I wasn't sure. I don't often revert after a SplitText so this is the first time I've seen this. Just for a quick test, I made a fork of VSDCs pen and changed out the font, but get the same little jump. It looks like the 'A' is the biggest troublemaker as you can also see it in the word 'MANUAL' now too.

 

See the Pen xqomom by PointC (@PointC) on CodePen

  • Like 2
Link to comment
Share on other sites

Yep, the browser is applying some funky custom kerning, but refuses to do so when something is wrapped in a <div> or even <span>. I can't think of anything we could do in SplitText to fix that. 

 

Have you tried adding this to your CSS?: 

font-kerning: none;
  • Like 7
  • Thanks 1
Link to comment
Share on other sites

Thank you for the great replies and explanations!
I see it works in the CodePen Demo now and i guess font-kerning: none and some letter-spacing is fixing the problem.

I´ve got another problem with it now, but i will post it in another post.

 

Again, thanks for the great support!

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