Lottie files not showing up in preview test lottie

Lottie Animation Design
1

I want to export my ae file into lottie files, from the lottiefiles window in the after effects the animation is showing up and i can save the lottie file

but when i tried to test preview using lottie preview on browser it’s only show up like broken file like this

image
image1917×974 103 KB

anyone experience this thing ?

my lottiefiles version is 3.5.3

edit :
I noticed that the lottie file that i saved from lottiefiles plugin it’s about around 7mb but when I look up in the lottiefiles dashboard website the file size only 15kb which is odd

2

Hi,

It happens also to me, all my new exports are suffering the same issue.

3

Yes also having the same issue. Previous AE compositions that were exporting fine are no longer working. When looking at the JSON code can see that the assets are not being included even though this is ticked in the export settings.

Hopefully there is a fix for this soon.

4

In case this helps, I managed a work around for now. As I had previously exported lottie files with the same images, I just replaced the below line of code with code from previous files that had used the same images. Thinking you could potentially use an online PNG rasteriser if you dont have existing code, something like Encode PNG to JSON online for free! | PNG to JSON Encoder

[{“id”:“image_0”,“w”:28,“h”:17,“u”:“/images/”,“p”:“image_0.png”,“e”:0},{“id”:“image_1”,“w”:4,“h”:414,“u”:“/images/”,“p”:“image_1.png”,“e”:0}],“layers”:

5

Does it mean I have to export my animation to PNG sequence?

6

No, you just need to add in the json code for the PNGs. The issue is that the export is no longer including this. If you have previous Lottie exports that were working you can open them up in a code editor and see where the image asset code is.

For example, this is the jsoncode for one of the images I was using in my AE animation. This is what is no longer being included for some reason.

[{“id”:“image_0”,“w”:28,“h”:17,“u”:“”,“p”:“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAARCAYAAADOk8xKAAAACXBIWXMAAAABAAAAAQBPJcTWAAAAJHpUWHRDcmVhdG9yAAAImXNMyU9KVXBMK0ktUnBNS0tNLikGAEF6Bs5qehXFAAABT0lEQVQ4ja3Uz1HCQBTH8e8Ly50SyIxwFTsgHXDXDKQC7UDoACsIjHoOHUAH4jUwE0rIncB6wCAJhPzBd9zd9/vM251ZoWx9rPtoPUYkBIY83U3LtEsFbJJMkEEZtDjorroo5hm7FnZrUSTGKIb5HRTelRMen36nSFT+hK7fQckcaOScDDG0xWN7WR10gyYq+jrD9ox+7+a1LJp9pW7QpL47n2zPiH5riN0aAqNUVwNteLhBMyv28oQxpnWyMcZO6301JD2pyIZtzcIxN/lgGawCmgSrYCXRPzALQ79ht1+uYkd0PQb9fA2VHGyK3R4Uwo6oPwHpX0AfcMxQcIMGte0CkfubsWsoLImUZaB27jkms8oYcOiVWWq1g4o8A3Qvsaz1N1HNqYzFdchIfwBdA2GRwHb1Lo4Z3gw6ZkikrBQ6i9+wB9Jgpyb/gp1WKv8HOzmk/YDcLtQAAAAASUVORK5CYII=”,“e”:1},

7

i noticed that the code was also different in my previous json and the new ones:

the difference is here:

OLD: “u”:“”

NEW: “u”:“/images/”

I replace them, but it only works on the preview site in Lottiefiles, but still don’t work on my website using elementor

8

I found if I download straight from AE the png issue happens. If I go to Lottie Files website and download the JSON directly it works! Goodluck to whoever reads this :slight_smile: