如何在ScrollToPlugin滚动时触发TimelineMax动画（ScrollMagic）？

Question

我有一个按钮部分，点击触发器滚动到下一部分。

我想要做的是当这个滚动事件发生时我想触发我的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);

Answer 1

尝试改变你的代码:)

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();
}