Jump to content


font rendering issue in safari (on Mac) when using SplitText

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



i have a staggerFrom  availing of the characters gotten from SplitText.


i have the exact same tween applied to 3 lines.


but strangely, after the third line animates in, it gets an immediate opacity boost, which looks awful.


any ideas?




See the Pen 32d80dcd6eeb3c67f4d426ff0bfb39a9 by Liamii (@Liamii) on CodePen

Link to comment
Share on other sites

Thanks for posting the demo.


At a quick glance I didn't see any code that would suggest that opacity should be less than 1 at any time.


There is quite a bit of html and CSS in there that doesn't seem related. It would help if you could remove everything that isn't related to the problem. For instance if the first 8 animations work fine. Remove all css, JS and html related to those. It just helps us find the problem quicker.


Again I'm having trouble seeing what the expected opacity should be.

  • Like 2
Link to comment
Share on other sites

When i looked at that example, i did not see any opacity on any of your elements!




Just tested in debug mode on codepen and now i see a inline style being added of opacity CSS property.


I do see that in your tweens that you are applying opacity, that is why you have a opacity: 0 in a staggerFrom() tween so that is why you have opacity on your tween.


On this tween LINE 20:

tl.staggerFrom(charsThree, 1, {opacity:0, left: "+=90", ease:Power2.easeOut}, 0.15, "-=0.7");


  • Like 3
Link to comment
Share on other sites

hmm. I think that was added after I had looked as the animation is different too. I could be wrong. Regardless, it looks like it is fixed.

  • Like 1
Link to comment
Share on other sites

Yeah i agree.. Cool i thought i had to have my eyes checked.. cuz it wasn't like that in regular codepen editor mode.. but then i checked in debug mode and it was there. Then when i checked in editor mode again .. i saw the opacity there. So i think Liam@II was changing the codepen while we where looking at it.

  • Like 2
Link to comment
Share on other sites



sorry i was editing this as you were looking at it. i assumed that because i was using an initial scale of 0, i didnt need to tween the opacity.


but i still see the exact same regardless of the edit. the first image below is the font after line 15 is JS is complete.

the second image is after line 17 of the JS is complete.


im on Mac (El Capitan) Safari 9.1.1



Link to comment
Share on other sites

it seems its a rendering issue in safari when doing 3D transforms. 


if you remove the rotationX AND set force3D to false the font will stay consistent throughout.

I can't fork your private pen so you can paste this.

var lineOne = new SplitText("#lineOne", {type:"chars"}), 
    lineTwo = new SplitText("#lineTwo", {type:"chars"}), 
    lineThree = new SplitText("#lineThree", {type:"lines"});

var charsOne = lineOne.chars, 
    charsTwo = lineTwo.chars, 
    charsThree = lineThree.lines;
CSSPlugin.defaultForce3D = false;
function load() {
  tl = new TimelineLite({delay:0});
  TweenLite.set("#lineOne, #lineTwo, #lineThree", {visibility: "visible", perspective:800});
  TweenLite.set("#logo", {visibility:"visible"})

 tl.to("#photo", 5, {top:"-=155",  ease:Power2.easeInOut}, "start");
 tl.staggerFrom(charsOne, 1, {scale:0, y:180, rotation:180, transformOrigin:"0% 50% -50",  ease:Power2.easeOut}, 0.015, "start+=2.2");
 tl.from("#logo", 1, {left:'+=200',  ease:Power3.easeOut}, "start+=4");
 tl.staggerFrom(charsTwo, 1, {scale:0, y:180, rotation:180, transformOrigin:"0% 50% -50",  ease:Power2.easeOut}, 0.015, "start+=4.3");
 tl.to("#blackWipe", 1, {left:"-=728",  ease:Power3.easeOut}, "+=1.8", "endFrame");
 tl.to("#logo", 1, {left:'-=90',  ease:Power3.easeOut}, "endFrame-=1");
 tl.staggerFrom(charsThree, 1, {opacity:0, left: "+=90", ease:Power2.easeOut}, 0.15, "-=0.7");
 tl.from("#CTA", 0.5, {scaleX:0, transformOrigin:"100% 50%", autoAlpha:0, ease:Power3.easeOut}, "+=0");

window.onload = load;

Next time, please try to reduce the demo. Thanks.

  • Like 1
Link to comment
Share on other sites

Another way to get around the Safari text animation bug is adding 

-webkit-font-smoothing: antialiased;

 to the CSS.

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