How to integrate Lottie SVG Animations?

[pixelijn]

That’s because Kirby copies files to the media folder.

[exeldoc]

aah. So with images it can not work. The URL of the Animation Images are changed aswell.

Thanks for the hint.

[exeldoc]

Ok, dirty solution would be to copy the folder images into the specific media folder:

I guess to make this programmaticly would need some haking, that would be hard to make consistent.

[SemMakata]

     <a class="logo" href="<?= $site->url() ?>">
            <lottie-player loop autoplay background="transparent" speed="1" src="<?= asset('assets/lotties/logo-animation.json')->url() ?>">
            </lottie-player>
        </a>

I cant get the Lottie to work.

[exeldoc]

Hey,
What exactly is not working?
Did you try to dump the URL, and is it a proper one? Not sure, if this

<?= asset('assets/lotties/logo-animation.json')->url() ?>

will give you the correct URL or at the right time in the process for the Lottie player. Till now, I never got to the ground of it, but I found these two ways to make it work:

In an object component inside a js file:

import bodymovin from "lottie-web";    
import playPauseLottie from "./player_svg/play_pause.json?url";

const animationPlayPause = bodymovin.loadAnimation({
container: play_pause,
renderer: "svg",
loop: false,
autoplay: false,
path: playPauseLottie,
 });

Of course the path needs to go to your file.

and with the in the template:

<lottie-player src="<?= $page->form_success_image()->toFile()->url() ?>"
    background="transparent" speed="1" autoplay></lottie-player>

The letter would make it possible to change the json via panel, the first one would just look for the one you picked from assets or where ever.
I hope that may be of help for you.

[SemMakata]

Hey there thanks for the help I got it to work, I wasn’t thinking properly the code itself worked fine but I forgot to set Lottie in the footer by adding this code.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>