How to integrate Lottie SVG Animations?

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

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

Thanks for the hint.

Ok, dirty solution would be to copy the folder images into the specific media folder:
Bildschirmfoto 2020-10-22 um 08.58.33

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

     <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.

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.

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>