Триггеры Scrollmagic, установленные областью просмотра

У меня проблема с scrollmagic. Я хотел бы иметь возможность последовательно запускать все 3 анимации на рабочем столе, но на меньших экранах просмотра запускать их одну за другой по мере прокрутки пользователя.

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

Я показал, как эта проблема проявляется в следующем коде:

https://codepen.io/TomBismuth/pen/jYaybe

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

var sceneEntire = new ScrollMagic.Scene({
triggerElement: "#triggerall",
reverse: false
})
.setTween(entire) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);

и это происходит только на мобильных устройствах

var scene1only = new ScrollMagic.Scene({
triggerElement: "#trigger1",
reverse: false
})
.setTween(row1) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);

var scene2only = new ScrollMagic.Scene({
triggerElement: "#trigger2",
reverse: false
})
.setTween(row2) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);

var scene3only = new ScrollMagic.Scene({
triggerElement: "#trigger3",
reverse: false
})
.setTween(row3) // trigger a TweenMax.to tween
.addIndicators({ name: "1 (duration: 0)" })
.addTo(mainController);

Конечная цель — представить следующие анимации (более сложная версия предыдущего примера): https://codepen.io/TomBismuth/pen/ppWqwN привлекательным образом для пользователей настольных и мобильных устройств на веб-сайте. Когда они все срабатывают одновременно, это непривлекательно на десктопе, а последовательное срабатывание — на мобильных устройствах.

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


javascript responsive-design gsap scrollmagic
person Thomas    schedule 07.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для мобильной версии вам нужно установить свойство triggerHook, когда элемент находится в области просмотра. Значения находятся в диапазоне от 0 до 1, где 0 представляет верхнюю часть области просмотра, а 1 — самую нижнюю. Вы можете использовать только приращение 0,1, поэтому значение 0,9 составляет 90% от верхней части (или 10% от нижней) области просмотра в зависимости от того, как вы хотите это сформулировать.

Таким образом, используя значение 0,9 в вашей первой сцене, это будет:

if (window.innerWidth < 737) {

    var scene1only = new ScrollMagic.Scene({
        triggerElement: "#trigger1",
        triggerHook: .9,
        reverse: false
    })
    .setTween(row1) // trigger a TweenMax.to tween
    .addIndicators({ name: "1 (duration: 0)" })
    .addTo(mainController);

}

Я думаю, это должно сработать.

Павел

person Paul12_    schedule 02.02.2018