jsciumi

Help with SplitText chars with serif font

Recommended Posts

Hi all! Quite desperate for some help on this! And a bit worried that there might not be a solution.

 

I'm using SplitText (by character) with a serif font and the bits that overlap the next character (in my Pen it's the "f" in "transform") and that bit doesn't fill in until after the entire staggerFrom has completed.

 

Any ideas? Thank you so much!

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for the demo.

It looks like your JavaScript is running BEFORE your custom font is ready. If the font is loaded, SplitText will take its measurements with the default browser font. 

 

Check out @Jonathan's advice here

 

 

 

  • Like 4

Share this post


Link to post
Share on other sites

It also looks like the browser is applying custom kerning which gets stripped out when things are wrapped in <div> or <span> (that's unrelated to SplitText - you'd have the same issue if you wrapped things manually). The solution is to use CSS to get rid of that kerning. Try adding this: 

 

font-kerning: none;
-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Hello @jsciumi and welcome to the GreenSock Forum!

 

When i looked at the above codepen I could not see the exact issue you were describing. Where the "f" in "Transform" was filling in after the staggerTo was complete.

 

I tested in latest Chrome and Firefox on Windows 10 but did not see this? What broswer and and OS did you see this in?

Share this post


Link to post
Share on other sites

First, thank you all so much for the help!

 

Unfortunately, I'm still not seeing any improvement.

 

@Carl, @GreenSock I've updated my Pen to include both of these potential fixes, namely:

1. wrapping js in: 

document.addEventListener("DOMContentLoaded", function(event){
  window.addEventListener("load", function(event){
    window.requestAnimationFrame(function(){
     // code here
    });
  });
});

2. adding kerning css (I even added to p#tagline div just in case)

p#tagline {
  font-size: 5rem;
  font-family: "Playfair Display", serif;
  font-kerning: none;
  -webkit-text-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
}
p#tagline div {
  font-kerning: none;
  -webkit-text-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
}

 

 

 

@Jonathan I'm running macOS High Sierra Version 10.13.6 and viewing in Safari Version 11.1.2 (13605.3.8). I've also included a screenshot of the "incomplete" "f"

Screen Shot 2018-08-28 at 1.13.14 PM.png

Share this post


Link to post
Share on other sites

Ooh! Just tested in Windows and it worked! So maybe that can help narrow things down at least!

Share this post


Link to post
Share on other sites

Ah, okay. I see it now in Safari - it's definitely a rendering bug in Safari (unrelated to GSAP or SplitText). When opacity is less than 1, it's chopping off that part of the "f" that's outside the bounding box of the <div>. Setting overflow:visible doesn't help either. It looks like a problem with Safari's compositor or something. 

 

I think a workaround could be to just set padding-right and an opposite margin-right, like this: 

 

 

I slowed down the animation so you can see things better. Notice I just set the charsClass to "split-fix" and created a CSS class accordingly with padding-right: 8px and margin-right:-8px. 

 

Does that work for you? 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

I was actually able to see the problem in both Edge and FF. (Chrome was fine)

 

Jack's fix seems to work properly in all browsers for me. 

:)

 

  • Like 1

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.