Jump to content
Search Community

Help with SplitText chars with serif font

jsciumi 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 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!

See the Pen oPLqVy by jsciumi (@jsciumi) on CodePen

Link to comment
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
Link to comment
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
Link to comment
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?

Link to comment
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

Link to comment
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: 

 

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

 

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
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...