Hando
@Hando
Верстак

Как анимировать несколько сцен?

Здравствуйте. У меня есть код работающий для одного элемента с использованием ScrollMagic. Это простая анимация выезжающего элемента.
<script type="text/javascript">

    var controller = new ScrollMagic.Controller();

    var tl = new TimelineLite({});
    tl.from(".img-soon-mob", 0.75, {
        top: 300
    });

    new ScrollMagic.Scene({
            triggerElement: ".w-img-soon-mob",
            duration: 0,
            offset: 100
        })
        .setTween(tl)
        .addTo(controller);
    </script>
Но проблема в том, что мне надо несколько элементов, которые появляются не одновременно и смещаются в разные места с разной скоростью. Я не придумал ничего лучше как попробовать добавить вторую сцену.
var controller = new ScrollMagic.Controller();

    var tl = new TimelineLite({});
    var tl2 = new TimelineLite({});
    tl.from(".img-soon-mob", 0.75, {
        top: 300
    });
    tl2.from(".img-soon-mob", 0.55, {
        top: 150
    });

    new ScrollMagic.Scene({
            triggerElement: ".w-img-soon-mob",
            duration: 0,
            offset: 100
        })
        .setTween(tl)
        .addTo(controller);

    new ScrollMagic.Scene2({
            triggerElement: ".w-img-soon-mob2",
            duration: 0,
            offset: 200
        })
        .setTween(tl2)
        .addTo(controller);
    >
Но почему то ничего не выходит. Они двигаются на одинаковое расстояние. В чем ошибка? И стоит ли для этих нужд использовать данное решение? Может быть взять другую библиотеку? У меня должно выезжать порядка 20 предметов, практически одновременно, но с разной скоростью на разные расстояния ивсе таки не совсем одновременно. Спасибо.
  • Вопрос задан
  • 204 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы