top of page

Lottie
Interactivity

& Sticky

How to create a Lottie animation in Editor X that plays according to the user's scroll value

Strat Animation

End Animation

Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.

It is also possible to run multiple Lottie animations on each page

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]
    // tagName: Custom element tag name

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

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

        const lottieInteractivityScript = document.createElement('script');
        lottieInteractivityScript.src = 'https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js';

        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!');
            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);
}

50%​

90%

70%

30%​

20%​

10%​

40%​

60%​

80%​

1ST LEVEL MENU

2ND LEVEL MENU

3RD LEVEL MENU

bottom of page