EM 中的 ScrollMagic 动画字体大小

Question

我在一个网站中使用 ScrollMagic，当我尝试在 em 而不是像素中为 font-size 设置动画时遇到问题。

所以，这是一个带有 ems 的示例：http://jsfiddle.net/41h1nfxo/7/

这是另一个带有 px 的：http://jsfiddle.net/jtdm0o6q/2/

如您所见，第二个效果很好。

不知道是什么原因造成的，希望大家帮帮我！ 谢谢

HTML

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

脚本

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});
    });    

Answer 1

问题的原因不在 ScrollMagic。
由于某种原因，TweenMax 无法获取9em 的起始值。

您可以看到，当您只运行补间而不将其添加到 ScrollMagic 时：http://jsfiddle.net/41h1nfxo/9/

解决此问题的一种方法是将 Tween 转换为 fromTo tween：http://jsfiddle.net/41h1nfxo/10/

现在，如果您使测试窗口非常窄，以使文本比视口宽，您仍然可以在滚动时观察到跳跃行为（仅当您拖动滚动条手柄时）。
原因是在文本变得小于视口宽度的那一刻，水平滚动条被移除。这会触发视口的大小调整，从而重新计算相对于滚动条的滚动距离。
突然之间，您当前拖动手柄的位置转换为 DOM 中更靠下的位置。这就是为什么只有在向下滚动时才会发生这种情况。 在这里观察这个现象：http://jsfiddle.net/41h1nfxo/11/

要解决此问题，您可以将其添加到 css 中：

body {
    overflow-x: hidden;
}

现在一切正常：http://jsfiddle.net/41h1nfxo/12/

对于未来的 ScrollMagic 问题，我建议遵循本指南：https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md
特别是第 2.2 点会为您指明正确的方向。

至于为什么 GSAP 可能对 em 中的字体大小有问题，我只能猜测。
我建议你在他们的论坛上发布这个问题。

希望这会有所帮助。 J