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