GSAP scrolltrigger / lottie animation

ffinger

Hey laythemers,

I just tried to work with GSAP framework and the Scrolltrigger plugin and it works fine so far.
But I fail to run a lottie animation with the Scrolltrigger plugin.

GSAP Docs provide a little helper function for this, which I used:

function LottieScrollTrigger(vars) {
    let playhead = { frame: 0 },
        target = gsap.utils.toArray(vars.target)[0],
        speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" },
        st = { trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1 },
        ctx = gsap.context && gsap.context(),
        animation = lottie.loadAnimation({
            container: target,
            renderer: vars.renderer || "svg",
            loop: false,
            autoplay: false,
            path: vars.path,
            rendererSettings: vars.rendererSettings || { preserveAspectRatio: 'xMidYMid slice' }
        });
    for (let p in vars) { // let users override the ScrollTrigger defaults
        st[p] = vars[p];
    }
    animation.addEventListener("DOMLoaded", function () {
        let createTween = function () {
            animation.frameTween = gsap.to(playhead, {
                frame: animation.totalFrames - 1,
                ease: "none",
                onUpdate: () => animation.goToAndStop(playhead.frame, true),
                scrollTrigger: st
            });
            return () => animation.destroy && animation.destroy();
        };
        ctx && ctx.add ? ctx.add(createTween) : createTween();
        // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
        ScrollTrigger.sort();
        ScrollTrigger.refresh();
    });
    return animation;
}

I deactivated lazyloading, all kind of transition, and activated compatibility mode. I think it has something to do with the addEventListener "DOMloaded"? But I can't get my head around this. Anybody a hint to solve this?

Cheers
Felix

ffinger

Ok I just figured it out myself. For everyone having the same issue: I haven't loaded the lottie web framework, but only the lottie player. So far I only embedded lottie animations via the player and didn't know I need the framework :)

So you just need to load the web framework instead of the player in your "Custom CSS & HTML" -> "Custom <head> content" Tab:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.1/lottie.min.js"></script>

Cheers!

arminunruh

nice! i see more and more people wanting to use lottie mmh

moND0711

Yeah, I'm one of them too ;-)

arminunruh

:D

probably in the code example of the first post here you need to use

window.laytheme.on('newpageshown', function(){
...your code
})

instead of

animation.addEventListener("DOMLoaded", function () {
...your code
})

Lay Theme Forum

GSAP scrolltrigger / lottie animation

Before you post:

When you post:

Online Users