Scrollmagic timelineMax duration offset

Question

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

Так что, взяв это, я собрал следующую настройку 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) 

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

Это мой вопрос, что представляют эти значения по сравнению с продолжительностью. Так как в этом случае у меня есть 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 

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

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

выше Timeline теперь имеет длительность три секунды.

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

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

ScrollMagic проецирует длительность в Timeline или Tween на его собственной продолжительности (в продолжительности от ScrollMagic.Scene).