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

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

score 0 · Answer 1 · answered Mar 25 '19 at 16:44

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

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

1 Answers1