Здравствуйте. У меня есть код работающий для одного элемента с использованием 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 предметов, практически одновременно, но с разной скоростью на разные расстояния ивсе таки не совсем одновременно. Спасибо.
Простой
