SplitText and cut off characters

[niklasinla]

I'm using SplitText (see below) - I'm using a script font from Google Fonts & some characters get cut off (on the left side). Parts of their shapes are sometimes below the character before & then this happens.
I've tried to apply a class called words that set the overflow to visible but that didn't help.
overflow: visible;

• This is happening in IE & Chrome during animation - but then as soon as the animations stops it shows the complete letter.
• No cut off letters in Firefox & Opera.
• In Safari the cut off letters remains cut off even after animation.

Anyone have an idea how to solve this?

 

Niklas

//split greetings txt into words
var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words"});
//create a TimelineLite instance - animation
var tl = new TimelineLite({paused:true, delay:1});
tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"});
tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1);
tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, "-=0.2");


window.onload = function()
{ 
tl.play(); 
};

[Carl]

You should make sure the external fonts are loaded before splitting the text as the text will change size after the font is loaded.

[jamiejefferson]

Hmm it sounds like the SplitText is running on the default font, and is then being swapped to the web font after it's loaded.

 

This should explain what's happening better than I can. You'll need to wait for the font to have loaded first - Paul has a few ideas on this but it's 4 years old, and I'm not sure if any newer methods exists. I suppose a quick Google is probably in order. - Looks like the Web Font Loader is a pretty great solution.

[Carl]

Great work, Jamie.

 

Here is great codepen which shows how to know when both google or custom fonts are loaded:

http://codepen.io/desandro/pen/fkeHt

 

*if using google fonts you only need the first WebFont.load() block

 

WebFont.load({
  google: {
    families: [ 'Tangerine', 'Cantarell' ]
  },
  active: function() {
    log('google fonts active');
  },
  inactive: function() {
    log('font inactive');
  },
  loading: function() {
    log('loading google font');
  },
  fontactive: function(fontFamily, fontDescription) {
    log( 'google font active', fontFamily, fontDescription );
  },
  fontinactive: function(fontFamily, fontDescription) {
    log( 'google font inactive', fontFamily, fontDescription );
  }
});

[niklasinla]

Aha.

Didn't know there was a way to find if a font is loaded or not.

I guess that the above code need the following library:

https://github.com/typekit/webfontloader

 

Thanks a lot to both of you!
Will try this.

[niklasinla]

Sorry - now I'm here again.   
I sucessfully loaded the Web Font Loader.
But as soon as I include this script the spacings between the words dissapear when using splitText..

My code at the moment is as follows:

// log to body
function log() {
  var div = document.createElement('div');
  div.textContent = Array.prototype.slice.call(arguments);
  document.body.appendChild( div );
}


WebFont.load({
  google: {
    families: [ 'Tangerine', 'Cantarell' ]
  },
  active: function() {
    log('google fonts active');
  },
  inactive: function() {
    log('font inactive');
  },
  loading: function() {
    log('loading google font');
  },
  fontactive: function(fontFamily, fontDescription) {
    log( 'google font active', fontFamily, fontDescription );
  },
  fontinactive: function(fontFamily, fontDescription) {
    log( 'google font inactive', fontFamily, fontDescription );
  }
});


//split greetings txt into words
var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words, chars"});
//create a TimelineLite instance - animation
var tl = new TimelineLite({paused:true, delay:1});
tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"});
tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1);
tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, "-=0.2");


window.onload = function()
{ 
   tl.play(); 
};

Also I'm not sure how to acheive the correct order for loading things now.
How do I start the timeline at the correct time?
The setup of timeline and splitText is happening as soon as the DOM is ready.
I load the js-file containing the code above just before </body>
I do realise I need to move the splitText code into the "active" callback from WebFontLoader but this gives me errors. "split" then becomes undefined...

Niklas

This is my html:

 

<!DOCTYPE html>
<html>
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
    <title>Christmas Card</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='normalize.css' type='text/css' media='all'>
    <link rel='stylesheet' href='styles.css' type='text/css' media='all'>    
</head>
<body>
    <div id="container">
        <div id="snow"></div>
        <img id="bkg-img" src="images/bkg.jpg">
        <img id="firtreeBells" src="images/firtree-bells-opt.png">
        <div id="greetingsTxt">Merry Christmas &<br>a Happy New Year from Company Name</div>
        <img id="logo" src="images/logo.png">
    </div>
    <script type="text/javascript" src="js/greensock.js">></script> 
    <script type="text/javascript" src="js/animation.js">></script>
    <script type="text/javascript" src="js/snow-fittext.js"></script>
    <script type="text/javascript">window.fitText( document.getElementById("greetingsTxt"), 0.8 );</script>
</body>
</html>

 

[jamiejefferson]

I dunno, maybe something like this could get you started? You can work out how much you want to run at document ready and how much can wait until stuff has loaded.
 

var fontsReady = false;
var windowReady = false;


//create a TimelineLite instance - animation
var tl = new TimelineLite({paused:true, delay:1});
tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"})
tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, 0.4);



// function for when images etc have loaded
window.onload = function() {
  windowReady = true;
  allReady(); // try allReady in case onfonts was first
};



// function for when fonts have loaded
var onfonts = function() {
  fontsReady = true;

  //split greetings txt into words
  window.split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words, chars"});
  tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1);
  allReady(); // try allReady in case onload was first
};


// function for when both fonts and images etc have loaded
var allReady = function() {
  if (fontsReady && windowReady) tl.play();
}


WebFont.load({
  google: {
    families: [ 'Tangerine', 'Cantarell' ]
  },
  active: onfonts
});

[niklasinla]

Wow!!
Thank you so much!

I realised that I also have some misstakes in my code so I'm working on this as we speak.
I might have been a little to fast to post here...   
But this will help me for shure...

Niklas

[niklasinla]

Hi!

Ok this whole thing became far more complicated than I thought it would be.   

Anyways...
Below is the code that I have.

• I had to move all animation to when everything is ready because I don't set any height in the CSS which means that somtimes the y-animations are wrong.
   
• I also had to set autoAlpha to 0 for the text during the font loading otherwise I get a flash of unstyled text.

Now the staggerFrom animations of the split words aren't working - instead it animates all the words as one block. I have no idea why that is happening.

But last - the problem with cut off character is still the same. I actually don't think the problem is with the font loading...

You can see the whole animation here:

http://widecircle.se.preview.citynetwork.se/go/julkort/

 

The problem is with the letter f in the word "from"...

 

Best, Niklas

var fontsReady = false;
var windowReady = false;


//create a TimelineLite instance - animation
var tl = new TimelineLite({paused:true});


// function for when images etc have loaded
window.onload = function() {
  windowReady = true;
  allReady(); // try allReady in case onfonts was first
};




// function for when fonts have loaded
var onfonts = function() {
  fontsReady = true;  
  allReady(); // try allReady in case onload was first
};




// function for when both fonts and images etc have loaded
var allReady = function() {
  if (fontsReady && windowReady)
    {
      TweenLite.set("#greetingsTxt", {autoAlpha:1});
      var split = new SplitText("#greetingsTxt", {type:"words, chars"});      
      tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:0})
      tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0});
      tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:0});
      tl.play();     
    }
}




WebFont.load({
  google: {
    families: [ 'Tangerine:700' ],


  },
  active: onfonts,
  loading: function() {
    TweenLite.set("#greetingsTxt", {autoAlpha:0});
  }
});

[jamiejefferson]

You removed the stagger parameter:

staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1);

 

I'm not seeing anything wrong with the characters in Opera or Firefox. In IE10 and Chrome I can see the f is cut off during the animation but it renders correctly once it stops. Just looks like a browser rendering oddity to me - GSAP isn't setting hidden overflows or anything here.

 

Perhaps there is an issue with the font file itself, probably combined with an inherent issue in the browsers renderer. display:inline-block (needed by splittext) and opacity:<1 (from your stagger tween) seems to be the cause. If it's an issue, maybe a less fancy font would provide a better result.

[niklasinla]

Thanks a ton for taking some of your time to help me out!!   

I totally missed the stagger parameter!
Also I didn't know about the FontLoader.js.
Well - the biggest problem seems to be Safari.

I have a really old Safari (5.1.7) for Windows installed so I don't really know how it works with a more recent version. In Safari it seems to keep the "cut-off" even after animation is done.
I guess the most interesting part would be the Ipad - how it works there.
Don't have one where I'm right now but I will check later for sure...

Best, Niklas 

[jamiejefferson]

Safari on Windows is pretty dead in the water now, and I don't put much thought into it to be honest. It has pretty much no market share at all on Windows - Apple has ceased developing it and hasn't updated in over a year. 5.1.7 is the final Windows release.

 

If you want to know what Safari on iPad or Mac is like for sure, you'll need to test on those platforms.

[adventmedia]

I'm seeing the problem with cut off characters in some browsers (Chrome, Safari) but not Firefox.

It appears with a cursive font where the character in effect "leans out" of its bounding box, as the attached screen grab shows. The div created by SplitText is too narrow - and if it were wide enough it would widen the character spacing.

I can't figure out what is clipping the character, it's not the usual suspects (e.g. overflow, background))

[Carl]

Hmm, are you sure you are loading the font before the SplitText is run?

We really need to see what is happening in a reduced test case in order to give you any solid advice.

Please create a CodePen demo. Feel free to fork any of these demos to get started with a pen using SplitText: http://codepen.io/collection/KiEhr/

 

Thanks