Как перевернуть карточку одну за другой, используя scrollMagic - PullRequest
Новая
       98

Как перевернуть карточку одну за другой, используя scrollMagic

0 голосов
/ 25 декабря 2018

Я работаю над анимацией, используя ScrollMagic и TweenMax.Анимация состоит в том, что есть четыре карты, в то время как браузер прокручивает вниз, каждая карта переворачивается одна за другой.

Я пытался использовать каждую функцию для запуска анимации.но проблема заключалась в том, что триггеры находятся в одинаковом положении, так что карты переворачиваются в одно и то же время, а также как остановить прокрутку вниз, когда переворачиваются 4 карты?

вот мой кодовый блок https://codepen.io/MachoBoy/pen/yGXNpg

// init scrollMagic
var controller = new ScrollMagic.Controller();
$('.card-wrapper').each(function(index){
    //build scene
    //console.log(this.children[0]);
    var flipCard = TweenMax.to(this.children[index], 1, {rotationY: -180});
    var scene = new ScrollMagic.Scene({
            triggerElement: this.children,
            offset: 400,
            duration: 300,
            triggerHook: 0.9
        }).setClassToggle(this.children[index], 'flipped').addIndicators().setPin('.card-wrapper').setTween(flipCard).addTo(controller);
})
...