[Vuejs]-Trgger Lottie animation on scroll

by

0👍

✅

Well, I solved it and if anyone have the same issue here’s how I did it:

I basically used ScrollMagic and vue-lottie library together.

            animate(){
            const valSect = this.$refs.valueSection;
            //SCROLLMAGIC
            const controller = new this.$scrollmagic.Controller();
            const scene = new this.$scrollmagic.Scene({
                duration:9000,
                triggerElement:valSect,
                triggerHook:0
            })
            .setPin(valSect)
            .addTo(controller);         
            
            let scrollpos = 0; //SCROLL POSITION TRACKER
            
            //SCROLL LISTENER
            scene.on('update', e => {
                scrollpos=e.scrollPos/this.anim.totalFrames;
                
            })

            setInterval(() => {
                //delay += (scrollpos - delay) * accelAmount;
                this.anim.goToAndStop(scrollpos,true);
            });
        }
    },

I called this animate method in mounted and I also bounded it on the lottie component through another method.

Leave a comment