top of page

Sticky Scrolling Lottie Animations




In this lesson, you will learn how to animate lottie files as your users scroll down your website. Before you copy the code, watch our video to learn how to use the code:



Page Code:

 

$w.onReady(function () {


    setTimeout(() => {

        $w('#customElement1').setAttribute('lottie-sticky-trigger-element-id', $w('#lottieScrollRelativeToThisText').uniqueId)

    }, 100);

    

});


 

Custom element code:

 

initLottieInteractivity();


async function initLottieInteractivity() {

    try {

        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {

            // The user has enabled reduced motion

            console.log('Do not load Lottie animation');

            return

        } else {

            // The user has not enabled reduced motion

            const scriptsLoaded = await loadLottieScripts();

            console.log(scriptsLoaded); // true


            // add code here to use the Lottie scripts

            defineLottieInteractivity();

        }


    } catch (error) {

        console.error(error);

    }

}


function defineLottieInteractivity() {

    // The createLottieInteractivity The function needs to have 4 parameters:

    // AnimationUrl: Lottie Animation URL

    // Visibility: Array [start, end]

    // Frames: Array [start from , end at]

    // Tag Name: Custom element tag name


    // For example

    createLottieInteractivity('https://assets6.lottiefiles.com/packages/lf20_ABViugg18Y.json', [0, 1], [0, 300], 'flying-documents');

    createLottieInteractivity('https://assets8.lottiefiles.com/packages/lf20_kd8ZIYkRgP.json', [0, .8], [0, 488], 'd3-hologram');

}


function loadLottieScripts() {

    return new Promise((resolve, reject) => {


        const lottieInteractivityScript = document.createElement('script');


        lottieInteractivityScript.onload = () => {


            const lottiePlayerScript = document.createElement('script');

            lottiePlayerScript.src = 'https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js';


            lottiePlayerScript.onload = () => {

                resolve(true);

            };


            lottiePlayerScript.onerror = () => {

                reject(new Error('Failed to load Lottie Player script.'));

            };


            document.body.appendChild(lottiePlayerScript);

        };


        lottieInteractivityScript.onerror = () => {

            reject(new Error('Failed to load Lottie Interactivity script.'));

        };


        document.body.appendChild(lottieInteractivityScript);

    });

}


async function createLottieInteractivity(animationUrl, visibility, frames, tagName) {

    class LottieOnScroll extends HTMLElement {

        constructor() {

            super();

        }


        connectedCallback() {

            console.log('Custom element is loaded!');

        }


        static get observedAttributes() {

            return ['lottie-sticky-trigger-element-id'];

        }


        attributeChangedCallback(name, oldValue, newValue) {

            if (name === 'lottie-sticky-trigger-element-id') {

                const containerSelector = newValue;


                const lottiePlayer = document.createElement('lottie-player');

                lottiePlayer.src = animationUrl;

                lottiePlayer.autoplay = false;

                lottiePlayer.loop = true;

                lottiePlayer.id = `lottie-${tagName}`;

                this.appendChild(lottiePlayer);


                lottiePlayer.addEventListener("ready", () => {

                    LottieInteractivity.create({

                        player: `#${lottiePlayer.id}`,

                        mode: "scroll",

                        container: `#${containerSelector}`,

                        actions: [{

                            visibility,

                            type: "seek",

                            frames,

                        }, ]

                    });

                });

            }


        }

    }


    customElements.define(tagName, LottieOnScroll);

}

 

Enjoy!

Comments


bottom of page