Scrollmagic timelineMax смещение длительности

Question

У меня довольно простое событие Scrollmagic. Он включает в себя очистку разделов, как описано здесь - Пример очистки разделов ScrollMagic.

Итак, взяв это, я собрал следующую настройку ScrollMagic.

var ctrl = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 'onLeave'
    }
});

var animationEvents = new TimelineMax()
    .fromTo($('#show .elem1'), 0.5, {opacity: '1'}, {opacity: '0', ease:Power1.easeInOut}, 0)
    .fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)
    .fromTo($('#show .elem3'), 0.5, {opacity: '0'}, {opacity: '1', ease: Back.easeOut}, 2.4)
    .fromTo($('#show .elem4'), 1, {opacity: '0'}, {opacity: '1', ease:Power1.easeInOut}, 3);

new ScrollMagic.Scene({
    triggerElement: '#wrapper',
    duration: '400%',
})
.setPin('#wrapper')
.setTween(animationEvents)
.addTo(ctrl);

Таким образом, в основном я создал контроллер ScrollMagic, создал график анимации и настроил сцену.

Работает отлично, никаких проблем не бывает. Тем не менее, я пытаюсь обернуть голову вокруг некоторых из этих значений, чтобы я мог сделать функцию scrollTo из меню, которая может прокручивать до каждого из элементов.

Я близок к тому, чтобы работать, но то, что я не могу понять, это следующее; продолжительность моей сцены 400% это означает, что когда я прокручиваю #wrapper закреплен за эквивалент прокрутки мимо элемента (по отношению к моему триггеру) в 4 раза больше высоты wrapper,

Это я понимаю, но то, что я не понимаю, в каждом элементе TimelineMax у вас есть это...

.fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)

Вы можете разбить все это, но 1 представляет некоторую продолжительность, в которой я не уверен. и последняя переменная, в этом случае 2 представляет ее смещение, когда начинать.

Это мой вопрос, что эти значения представляют по сравнению с продолжительностью. Поскольку в этом случае у меня есть 4 действия, первое из которых начинается с 0, а последнее заканчивается числом 4, для меня имеет смысл то, что .elem1 начинается в точке продолжительности 0% и заканчивается в точке продолжительности 50% а также elem4 начинается в точке продолжительности 300% и заканчивается в точке продолжительности 400% Однако, похоже, это не так, или, по крайней мере, продолжительность #wrapper не так, как рассчитывается элемент продолжительности.

По крайней мере, мне нужно выяснить представление между этими числами смещения в TimelineMax и продолжительностью.

Любая помощь будет принята с благодарностью.

Answer 1

new TimelineMax()
    .fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)
                               ^^ --> A
                                                                                  ^^ --> B

A - время воспроизведения анимации от начала до конца. (в этом случае ему требуется одна секунда, чтобы переместиться из исходного положения в назначенное).

B - позиция анимации на временной шкале. (особенно интересно, когда у вас есть несколько твинов на одной временной шкале, которые не должны играть в прямой последовательности.) Здесь это означает, что анимация (fromTo(...) начинается две секунды на временной шкале.

Вышеуказанная временная шкала теперь имеет продолжительность три секунды.

Если мы применим эту логику к вашей временной шкале animationEvents мы видим, что его продолжительность составляет четыре секунды.

Теперь для части ScrollMagic:

ScrollMagic проецирует продолжительность временной шкалы или анимации на свою собственную продолжительность (продолжительность ScrollMagic.Scene).