Export to Lottie - File not working on Wordpress/Elementor


I am new user. I wanted to create an animation to use on a website. I created a simple animation and used the built in export to lottie.

I uploaded the .json file to my wordpress site to test it but it doesn’t show the images. I have attached a screen shot. I am using the latest version of Wordpress and Elementor pro.

The file works fine when I open in my local browser. It just doesn’t work when I upload to Wordpress.
Image of local browser preview attached

Are there any settings I need to change before exporting? Do I need to change something in the file such as where the image is sourced from?

I have no experience with that, but:

Did you upload the json file only? Don’t you need to upload the PNGs?

Hello Rodolforg

Thank you for your time, it is very much appreciated.

I did just upload the .json to start with, after I tried uploading the .png’s i used.

I did try doing a ‘ctrl f’ in the .json file and found this line:
{“id”: “image_1”, “w”: 135, “h”: 177, “u”: “images/”, “p”: “finny.png”}

I have very little coding knowledge, which is why I installed this software. However the file is saved \Documents\Site\Ani\images locally

I tried changing “u”: “images/” to “u”: “wp-content/uploads/2023/12” (I guessed this may be related to file location)
But no luck I did also change the file name of the .json. (I did this to make sure I was uploading the right .json file) I don’t know if that would make a difference.

So at the moment I have the two.png images I used in the animation uploaded to the website. A altered .json file with the changes in the code mentioned above. However I still have the issue. I can see the files moving like they do in the actual animation, the images are just the same in my original screenshot.

What is the folder of the json file? Maybe it is relative to it.

It’s definitely something about the relative path as when you upload it to Wordpress/Elementor the file is stored somewhere…
It could be a little bit difficult as you need to first locate where the JSON has been uploaded and then where are you uploading the PNGs so finally to trace the relative path from the JSON to the PNGs.

BTW, in your specific example, I would suggest you to vector your images as they are simple. That way they are just shapes inside the JSON and you don’t need to upload or add any relative path. Even more, the final result would be smaller.

1 Like

Thank you both for getting back me.

I tried what Pablogil suggested first in creating a vector image. It seems like it may solve the problem and be better practice moving forward.

I tried importing my svg files (i created them in photoshop using pen and exported to .svg) but had issues regarding this. i.e it didn’t let me import the files. I’m going comment on a topic for this as I when I looked in the forum regarding this topic I couldn’t find an answer.

In the end I produced my shapes just using the spline tool and this worked. It is a bit rough as I need to learn the tool better. But I wanted to see if the principle worked. Which it did! I will look for some tutorials using this tool. :smiley: :raised_hands:

Thank you both for taking the time to help.

1 Like

Yes, the best option is to learn the “spline tool”, get used to it and create your simple shapes inside Synfig.

If they are complex then you better use a pro vector software (Inkscape, Illustrator or similar) and then import the vector assets into Synfig.