Как запустить анимацию TimelineMax при прокрутке ScrollToPlugin (ScrollMagic)? - PullRequest
Новая
       102

Как запустить анимацию TimelineMax при прокрутке ScrollToPlugin (ScrollMagic)?

1 голос
/ 11 марта 2019

У меня есть раздел с кнопкой, который при нажатии запускает переход к следующему разделу.

Что я хочу сделать, так это когда происходит событие прокрутки, и я хочу запускать мои tl.from анимации.

Сейчас анимации tl.from запускаются только при прокрутке пользователя, но не при нажатии кнопки. 

const button = document.getElementById('cta');

let tl = new TimelineMax({ onUpdate: updatePercentage })

function scrollToNextSection() {
    TweenLite.to(window, 2, { scrollTo: '#section-1'});
}
tl.from('.section__left', .5, { x: 200, opacity: 0, ease: Power4.easeOut })
tl.from('.section__right', .5, { x: -200, opacity: 0, ease: Power4.easeOut })
tl.from('.section__img', 1, { x: 400, opacity: 0 })

// init controller
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
    triggerElement: '#section-1',
    triggerHook: 'onLeave',
        duration: '100%',
    })
    .setPin("#section-1")
    .setTween(tl)
    .addTo(controller);

function updatePercentage() {
    tl.progress();
}    


button.addEventListener('click', scrollToNextSection);

1 Ответ

0 голосов
/ 25 марта 2019

Попробуйте изменить свой код следующим образом:) 

const button = document.getElementById('cta');

let tl = new TimelineMax({ onUpdate: updatePercentage }).from('.section__left', .5, { x: 200, opacity: 0, ease: Power4.easeOut })
 .from('.section__right', .5, { x: -200, opacity: 0, ease: Power4.easeOut })
 .from('.section__img', 1, { x: 400, opacity: 0 });

function scrollToNextSection() {
    TweenLite.to(window, 2, { scrollTo: '#section-1'});
}


// init controller
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
    triggerElement: '#section-1',
    triggerHook: 'onLeave',
        duration: '100%',
    })
    .setPin("#section-1")
    .setTween(tl)
    .addTo(controller);

function updatePercentage() {
    tl.progress();
}
...