ScrollMagic анимация FontSize в EM

Question

Я использую ScrollMagic на сайте, и у меня возникает проблема, когда я пытаюсь анимировать размер шрифта в em, а не в пикселях.

Итак, это пример с ems: http://jsfiddle.net/41h1nfxo/7/

И это еще один с px: http://jsfiddle.net/jtdm0o6q/2/

Как видите, второй работает хорошо.

Я не знаю, что вызывает эту ошибку, надеюсь, вы, ребята, можете мне помочь! Спасибо

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

Answer 1

Причина проблемы не в ScrollMagic.
По какой-то причине TweenMax не может получить начальное значение 9em,

Это видно, когда вы просто запускаете анимацию, не добавляя ее в ScrollMagic: http://jsfiddle.net/41h1nfxo/9/

Один из способов исправить это - превратить Твин в fromTo Твин: 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