How to trigger TimelineMax animation when ScrollToPlugin is scrolling (ScrollMagic)? - gsap

Question

I have a section with button which on click triggers scroll to the next section.
What I want to do is when this scroll event is happening I want to trigger my tl.from animations.
Right now animations tl.from are triggered only on user scroll but not on button pressed.
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

Try to change your code like that :)
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();
}