How to integrate Lottie SVG Animations?

exeldoc · October 21, 2020, 1:44pm

Hey. I have made a Lottie Animation with Bodymovin – An Aftereffekts plugin.

In the end it spits out a json file + in my case a foulder with some images, that are used in the animation aswell.

The Question is: How can i implement that in my Projekt site?
Since my tamplate just catches Images:

<?php foreach ($page->images() as $image): ?>
<li class="imageColumn <?= $image->klassen() ?>">
    <figure class="imageColumn ">
      <img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
    </figure>
  </li>
  <?php endforeach ?>

Maybay something like:

<?php foreach ($page->data.json() as $image)->isNotEmpty(): ?>
  <li class="imageColumn <?= $image->klassen() ?>">
    <figure class="imageColumn ">
      <img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
    </figure>
  </li>
  <?php endforeach ?>

^^not expact that to work, but from the idea.

pixelijn · October 21, 2020, 2:33pm

What is in that json file? And what is the output apart from the json file and an image folder? I would have expect a JS scripts or something like that?

exeldoc · October 21, 2020, 3:06pm

The file looks like chaos.
I don’t know how i can share this here.

Outout is just the json and the Image folder. Optional I can export an html file as a preview.
There the json content is put in a <script>:

pixelijn · October 21, 2020, 3:23pm

I’d consult a tutorial how to do that: https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page

exeldoc · October 21, 2020, 3:34pm

Thats helpful. i will go thow it and come back with a solution – i mean maybe.

Adspectus · October 21, 2020, 5:04pm

Maybe you will find the jq program useful, it is a very powerful filter for json files. In its basic usage, it does noting else than pretty print the json data. Hence

jq '.' file.json

will pretty print the file file.json. Filter usage would be

cat file.json | jq '.'

See also: http://www.compciv.org/recipes/cli/jq-for-parsing-json/

exeldoc · October 21, 2020, 7:53pm

Great! I got that going.

<li class="imageColumn">
    <figure class="imageColumn ">
      <lottie-player class="imgContainer" src="<?= $page->url() ?>/data.json" background="transparent"  speed="1"  loop autoplay></lottie-player>
    </figure>
  </li>

But how can i target those json files like i traget images. The aim would be to make from the logik work like this:

<?php foreach ($page->images() as $image)||($page->json() as $animation) : ?>
 <?php if ($image): ?>
  <li class="imageColumn <?= $image->klassen() ?>">
    <figure class="imageColumn ">
      <img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
    </figure>
  </li>
 <?php endif ?> 
 <?php if ($animation): ?>
   <li class="imageColumn">
    <figure class="imageColumn ">
      <lottie-player class="imgContainer" src="<?= $page->url() ?>/data.json" background="transparent"  speed="1"  loop autoplay></lottie-player>
    </figure>
  </li>
 <?php endif ?> 
  <?php endforeach ?>

I guess i have to filter for json files right? Maybe in a model to create the json() varible?

texnixe · October 21, 2020, 7:58pm

If I understand correctly, then you have multiple such json files and want to loop through them and then output this player instead of an image?

exeldoc · October 21, 2020, 8:00pm

Correct. that would be the best way. than i could treat json files like an image

texnixe · October 21, 2020, 8:00pm

I would expect you can filter by extension

foreach ( $page->files()->filterBy('extension', 'json') ...

Or loop through all files and then if extension is json use the lottie-player snippet, if it is a mime type image, use the other snippet.

exeldoc · October 21, 2020, 8:12pm

You mean like that:

<?php foreach ($page->images() as $image) || ( $page->files()->filterBy('extension', 'json') as $animation) : ?>
<?php if ($image): ?>
<li class="imageColumn <?= $image->klassen() ?>">
 <figure class="imageColumn ">
  <img class="imgContainer" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
 </figure>
</li>
<?php endif ?> 
<?php if ($animation): ?>
<li class="imageColumn">
<figure class="imageColumn ">
  <lottie-player class="imgContainer" src="<?= $page->animation()->url() ?>" background="transparent"  speed="1"  loop autoplay></lottie-player>
</figure>
</li>
<?php endif ?> 
<?php endforeach ?>

There might be a syntax error^^ Unexpacted || int the first row… how would you write that?

I see what you mean with the loop solution, but here i am lost in the syntax aswell.

texnixe · October 21, 2020, 8:25pm

This is not valid code

texnixe · October 21, 2020, 8:28pm

<?php foreach ($page->files() as $file ) : ?>
<?php if ($file->mime() === 'image' ): ?>
<li class="imageColumn <?= $file->klassen() ?>">
 <figure class="imageColumn ">
  <img class="imgContainer" src="<?= $file->url() ?>" alt="<?= $file->alt() ?>">
 </figure>
</li>
<?php endif ?> 
<?php if ($file->extension() === 'json'): ?>
<li class="imageColumn">
<figure class="imageColumn ">
  <lottie-player class="imgContainer" src="<?= $file->url() ?>" background="transparent"  speed="1"  loop autoplay></lottie-player>
</figure>
</li>
<?php endif ?> 
<?php endforeach ?>

Of course, you can first filter by type and then loop through the individual collections but I guess you want to mix images and animations.

exeldoc · October 21, 2020, 8:43pm

Mixed would be nicer, right!

So the json animation is running, but the images don’t get loaded anymore.

texnixe · October 21, 2020, 8:46pm

But it works if you only load one of these animations? If the answer is yes, maybe the script you load only works for one but not multiple animations. But that’s then something you have to figure out yourself, not familiar with that stuff.

exeldoc · October 21, 2020, 8:49pm

No thats not the Problem. multiple animations work.

type() instead of mime() works, as far as i see.

texnixe · October 21, 2020, 8:50pm

Oh, alright, I misunderstood and thought the images in the animations don’t get loaded…

Right, mime() would be image/png etc., my bad.

exeldoc · October 21, 2020, 8:52pm

funny, yes i meant the other images on the page but the images, which should be in the animation are indeed not loaded.

The Animation-Images aren’t loaded with one or multiple animations.

texnixe · October 21, 2020, 8:54pm

That is then probably a problem with wrong image paths or URL…

exeldoc · October 21, 2020, 9:14pm

Jap, there is a diverence in the URLs of the animations but don’t know, where this is comming from…
When i put enter the lottie player like this:

src="<?= $page->url() ?>/data.json"

the url looks like that:

http://localhost:8888/de/arbeiten/projektname/data.json

Here the images (in the animation) get loaded.
If i do the way i would like it to work:

src="<?= $file->url() ?>"

the url looks like that:

http://localhost:8888/media/pages/arbeiten/projektname/1465570585-1603313926/data.json

Where does this number come from?