Scrollmagic video animation in webpack (BigCommerce)

Question

I am trying to achieve a video animation with scrollmagic.

Desired outcome is that, the video plays based on the user scroll position.

export default function magic() {
//MAIN
var controller = new ScrollMagic.Controller();

// SceneOne animation
    const $video = $('#soVideo');
    let sceneOne = new ScrollMagic.Scene({
        duration: 9000,
        triggerElement: '#trigger1',
        triggerHook: 0
    })
        .setPin('#trigger1')
        .addIndicators()
        .addTo(controller);



        // SceneOne animation
        let accelamount = 0.1;
        let scrollpos = 0;
        let delay = 0;

        sceneOne.on('update', e => {
            scrollpos = e.scrollPos / 1000;

        });

        setInterval(() => {
            delay += (scrollpos - delay) * accelamount;

            $video.currentTime = delay;
            console.log(delay);
        }, 33.36); 
}

The problem is, I cannot get it working, the video stays static at scroll.

I am trying to do this for a product page, not sure what am I doing wrong.

Thanks for any tips!

score 1 · Accepted Answer · answered May 11 '20 at 08:28

Ok figured it out. Works now:

export default function magic() {

const intro = document.querySelector(".video-section");
const video = intro.querySelector('.video_zero');
const text = intro.querySelector('.intro-text');

var controller = new ScrollMagic.Controller();

// SceneOne animation
let sceneOne = new ScrollMagic.Scene({
    duration: 9500,
    triggerElement: intro,
    triggerHook: 0
})
    .setPin(intro)
    .addIndicators()
    .addTo(controller);



// SceneOne animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

sceneOne.on('update', e => {
    scrollpos = e.scrollPos / 1000;

});

setInterval(() => {
    delay += (scrollpos - delay) * accelamount;

    video.currentTime = delay;

}, 33.3);

}

Scrollmagic video animation in webpack (BigCommerce)

1 Answers1