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

【问题标题】：How to trigger TimelineMax animation when ScrollToPlugin is scrolling (ScrollMagic)?ScrollToPlugin 滚动时如何触发 TimelineMax 动画（ScrollMagic）？
【发布时间】：2019-03-26 00:44:05
【问题描述】：

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

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

【问题讨论】：

标签： gsap scrollmagic

【解决方案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();
}

【讨论】：