I’ve created some Lottie banner animations in AE (bodymovin) and can bring them into Adobe Dreamweaver. I can see the vector animation just fine. but I can’t see the included bitmap .png files.
I can see the .png content when I load the .json on the lottie test site, but I can’t see it in Dreamweaver.
I’ve tried different combinations of exporting the .png images in the .json file and having them in a separate folder but can’t get it working.
Any ideas?
Thanks
-B
Hi Bart, not knowing what your file looks like or what dimensions, I think the problem is the source path for the image inside the json file. And once you fix that you may not be happy with the quality of the png file.
What I suggest is not to include the image in the lottie. But instead put the image into a div in the html file and then put your lottie in a separate div above the div with the image. something like this:
<style>
.div-with-image {
position:relative;
width:300px;
height:300px;
}
.div-with-image img {
width:100%;
height:auto;
}
.lottie-div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
<div class="div-with-image">
<img src="path-to-image" alt="alt text here" />
<div class="lottie-div"> put lottie player code here</div>
</div>
Since the lottie is in a dive that is absolute, it will float over the image div. You can adjust the lottie to fall where you want it over the image. Here is an example of using this method on a website I did recently
Thanks for your insight Beckie.
I was able to get it working by changing the render export setting from canvas to SVG. Terminus recommended canvas vs. svg. But the SVG setting worked with the upload.
Thanks again