Jump to content
Search Community

Split Text using custom font

jeffdfarr test
Moderator Tag

Recommended Posts

I'm using Split Text but I get weird line breaks when animating. I believe it's due to not letting my custom font load first but I'm unsure how to solve this. I've gone through the forums but I haven't seen a clear answer. Here is the code I have...

 

// Hero animation
var heroTimeline = gsap.timeline({
paused:true,
onComplete: () => {splitLines.revert()}
});

const splitLines = new SplitText('.hero .block-animate', {type: "lines", linesClass: "line"});
$('.hero .block-animate .line').wrap('<div class="line-wrapper">');

heroTimeline.from(splitLines.lines, 1.25, {y: '150%', ease: "Power3.Out", stagger: 0.15}, 0.25);

window.onload = () => {
heroTimeline.play();
}

See the Pen BajBJEV by jeffdfarr (@jeffdfarr) on CodePen

Link to comment
Share on other sites

That seemed to help on the drastic breaks but there are still some small line breaks issues. Here is my code below. Again, I can provide the live URL if hidden.
 

// Hero animation
document.fonts.ready.then(function () {
  
var heroTimeline = gsap.timeline({
onComplete: () => {splitLines.revert()}
});

const splitLines = new SplitText('.block-animate', {type: "lines", linesClass: "line"});
$('.block-animate .line').wrap('<div class="line-wrapper">');

heroTimeline.from(splitLines.lines, 1.25, {y: '150%', ease: "Power3.Out", stagger: 0.15}, 0.25);

});

 

Link to comment
Share on other sites

19 minutes ago, jeffdfarr said:

I can provide the live URL if hidden.

Can you not re-create something similar in CodePen? It doesn't have to be the content that you're using on your actual site.

 

Side notes:

  • In GSAP 3, we recommend putting the duration inside of the vars parameter.
  • Your ease is invalid: you should use either use the condensed string form ("power3") or the old object form (Power3.easeOut).
  • You might want to use yPercent: 150 instead of y: '150%'.
Link to comment
Share on other sites

Yep, it literally can't take kerning into account. It's impossible, not a bug. That's why this note has always been in the SplitText docs :) 
 

Quote

 

Some browsers (like Safari) apply custom kerning by default between letters, so when characters are split apart and put into their own divs, the spacing is slightly different. A bug has been filed with the Safari team (it’s a browser issue, not SplitText) but you can typically eliminate the differences by setting these CSS properties:


font-kerning: none;
-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);
transform: translateZ(0);

 

 

 

Sorry, I wish I had better news for you. I can't think of any way to accommodate custom kerning like that. If anyone else has ideas, I'm all ears. 

  • Like 3
Link to comment
Share on other sites

  • 9 months later...

Just to add - as this tiny fractional jump was being stubborn after .revert

 

Some custom webfonts (the one I was using, of course) will force what looks like ligature adjustments (fi or ff for example) in Firefox and Safari (OSX Big Sur), regardless if these are set or unset with the CSS:

 

font-kerning: none;
-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-font-feature-settings:normal;
font-feature-settings:normal;

 

The only workaround I could find was to set css letter-spacing to a tiny increment like 0.01em.

 

Ta, Liam

  • Thanks 1
Link to comment
Share on other sites

Last addition to this.

 

On longer text passages... with some webfonts... with text over multiple lines... in safari (v/OS as above)... depending on line length and ragged edge paragraphs... sometimes words will find a home on the next line when .revert() has finished. Very ugly.

 

The only way I could get round this was target safari and add <br> via the CMS where I needed them in the passage and be super mindful via media queries  (I'm already detecting Safari as it is). Will also need to the run the splittext + revert again on resize.

 

This won't work well for dynamic passages — where I'd imagine youd need to do something more fancy with line count.

 

TLDR;  Safari + SplitText + (some?) Custom webfonts are not kindred spirits

 

 

Link to comment
Share on other sites

@limbo thanks for sharing that. Yeah, as far as I can tell, that's purely due to the fact that Safari applies custom kerning only in certain scenarios, so if you split the text apart, it refuses to do that. If you have any specific suggestions for workarounds, I'm all ears. I'm curious: did you try setting tag: "span"

Link to comment
Share on other sites

  • 3 weeks later...

Still working on this and found a nice way to cope with the problems I was having with custom font... only  run revert on resize. Seems obvious now.

 

function debounce(func){ // to throttle
  var timer;
  return function(event){
    if(timer) clearTimeout(timer);
    timer = setTimeout(func,150,event); // 150ms seems like a good sweetspot
  };
}
window.addEventListener("resize",debounce(function(e){

  mySplitText.revert();

}));

Needs testing on device - works well on desktop inc. Safari OSX.

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