Menu
I'm trying to use lottie to animate an SVG animation created in After Effects. I use the bodymovin extension to export the JSON data file. But, I also noticed the export includes some PNG images. I'm also getting console errors that said PNG's can not be found.
Why is it exporting PNGs as I'm using SVG (an AI file) in AE. Below is my code, and the error.
index.ts
import * as lottie from 'lottie-web';
import * as header from './assets/header.json';
import './css/base.sss';
var animation = lottie.loadAnimation({
container: document.getElementById('header'),
animationData: header,
renderer: 'svg/canvas/html',
autoplay: true
});
But I'm getting the following errors that the images can't be found. Why is bodymovin exporting/looking for pngs? I require SVG's.
Chrome console errors (sorry can't embed until 10 rep)
209
Open Bodymovin Plugin If your animation fully complete time to go with export .json file. Click the Bodymovin plugin. You can find look like this under follows. You have to select a destination folder where you can save all the files and select the composition which you are going to export. Make sure all files goes in one folder.
Any designer can easily export animated graphics as .json format using after effects through bodymovin. Smooth motion and low size file is one of the best points on this SVG animation. Developers can control the file with Lottie on web and mobile app too. That's really cool.
Perhaps the most fundamental difference between PNG and SVG is that one is a raster file type and the other is vector. A PNG is a raster — that is, pixel-based — image format. If you scale up a raster image too far, it becomes grainy and pixelated. Similarly, if the image is too small, it can become indistinct.
However, the exported SVG will not show all labels when the SVG image file is viewed in IE and most SVG editors (such as Inkscape and Illustrator), as well as some online services such as Wordpress. Instead, you will see a short version of the label and a warning Viewer does not support full SVG 1.1 at the bottom of the SVG export.
I found the problem. I have to convert paths to shapes in AI as noted here.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
