ScrollMagic animating FontSize in EM

Question

I'm using ScrollMagic in a site and I have a problem when I try to animate a font-size in em and not in pixels.

So, this is an example with the ems: http://jsfiddle.net/41h1nfxo/7/

And this is another one with px: http://jsfiddle.net/jtdm0o6q/2/

As you can see, the second one works well.

I don't know what causes this bug, hope you guys can help me! Thank you

HTML

<div id="thediv">
<span>Awesome</span>

SCRIPT

var controller;
$(document).ready(function($) {
    controller = new ScrollMagic();    
var tween = TweenMax.to("#thediv", 1, {height:100,fontSize:"100px"});
var scene = new ScrollScene({triggerElement: "#thediv", duration: 200})
                    .setTween(tween)
                    .addTo(controller);
scene.addIndicators({zindex:100});
    });

Hi, iv always used the math random functionality to generate it: e.g. `'font-size': Math.random()*300+150` try that and see if it makes a difference. — jagmitg, Aug 17 '14 at 17:33

score 1 · Accepted Answer · edited Aug 01 '22 at 20:55

The reason for the issue is not within ScrollMagic.
For some reason TweenMax fails to get the starting value of 9em.

You can see that when you just run the tween without adding it to ScrollMagic: http://jsfiddle.net/41h1nfxo/9/

One way to fix this is turning the Tween into a fromTo tween: http://jsfiddle.net/41h1nfxo/10/

Now if you make the test window very narrow, so that the text is wider than the viewport, you can still observe a jumping behavior while scrolling (only if you drag the scrollbar handle).
The reason for that is that at the exact moment the text becomes less wide than the viewport the horizontal scrollbar is removed. This triggers a resize of the viewport and thus recalculates the scroll distance in relation to the scrollbar.
So suddenly the position you are currently dragging the handle translates to a position that is further down in the DOM. That is why this is only happening, when scrolling down. Observe this phenomenon here: http://jsfiddle.net/41h1nfxo/11/

To fix this you could for example add this to the css:

body {
    overflow-x: hidden;
}

And now everything works as expected: http://jsfiddle.net/41h1nfxo/12/

For future ScrollMagic problems I recommend following this guide: https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md
Especially Point 2.2 would have pointed you in the right direction here.

As to why GSAP might have a problem with font-sizes in em, I can only guess.
I suggest you post this issue in their forums.

ScrollMagic animating FontSize in EM

1 Answers1