Scrollmagic TimelineMax не анимируется

Я пытаюсь понять, как использовать TimelineMax с Scrollmagic. Проблема легко объяснима.

У меня есть похожие элементы DOM, например частицы, которые должны двигаться медленнее, чем скорость прокрутки.

Эта первая реализация РАБОТАЕТ (без временной шкалы)

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
$particles.each(function() {
    var tween = TweenMax.to($(this), 1, { y: -100, ease: Linear.easeNone });
    var scene = new ScrollMagic.Scene({
        triggerElement: ".wrapper",
        duration: 1000
    });
    scene.setTween(tween);
    scene.addTo(controller);
});

Вторая реализация НЕ РАБОТАЕТ (использует временную шкалу)

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
    timeline.to($(this), 1, {  y: -200, ease: Linear.easeNone });
});
var scene = new ScrollMagic.Scene({
    triggerElement: ".wrapper",
    duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);

Я бы хотел, чтобы временная шкала работала, но элементы не анимируются. Они движутся, но с нулевым временем.

Спасибо за помощь

--- CODEPENS ---

https://codepen.io/anon/pen/wJOveM (несколько сцен)

https://codepen.io/anon/pen/dvryog?editors=1111 (с графиком НЕ РАБОТАЕТ)


javascript gsap scrollmagic tween
person Pegui    schedule 31.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Можете ли вы попробовать использовать метод TimelineMax .add() вместо метода .to() во второй реализации? Итак, ваш код должен выглядеть так:

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
    timeline.add(TweenMax.to($(this), 1, {  y: -200, ease: Linear.easeNone }),0);
});
var scene = new ScrollMagic.Scene({
    triggerElement: ".wrapper",
    duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);

Кроме того, для лучшей отладки добавьте в сцену метод .addIndicators(), чтобы видеть индикаторы на экране, которые действительно могут помочь при отладке при прокрутке. Вы также можете попробовать поиграть со свойством duration, чтобы убедиться, что все работает правильно.

ОБНОВЛЕНИЕ: поскольку все частицы должны были двигаться одновременно, я добавил свойство ,0 в конце каждого вызова метода .add. Это гарантирует, что все промежуточные кадры запускаются в одних и тех же положениях. Вы можете узнать больше о свойстве position здесь:

https://greensock.com/asdocs/com/greensock/TimelineLite.html#add()

Надеюсь, на этот раз рабочий пример :)

https://codepen.io/anon/pen/ryROrv

Надеюсь это поможет. Ваше здоровье.

person Gurtej Singh    schedule 02.04.2017
comment
Спасибо, Гуртей! Я пробовал использовать метод .add (), но все еще не работал. Я создал 2 codepen, если кто-то хочет повеселиться;) codepen.io/anon/pen/wJOveM (несколько сцен) codepen.io/anon/pen/dvryog?editors=1111 (с графиком НЕ РАБОТАЕТ) - person Pegui; 03.04.2017
comment
@Pegui Спасибо за код. Теперь стало намного яснее, чего вы хотели. Я не понял, что вы хотите, чтобы все частицы были анимированы одновременно. Пожалуйста, посмотрите мой обновленный ответ выше, я считаю, что теперь он работает. - person Gurtej Singh; 03.04.2017