lottie-json-to-js v1.0.1
Lottie JSON to JS Converter
Convert Lottie/BodyMovin .json animations to .js files
Why?
The After Effects plugin BodyMovin is a great way to export animations and play them on the web. These animations are exported as .json
files however .json
files need to be loaded from a web server, so if you're wanting to load a lottie animation on a local web page (a .html
file being served from your file system) it will not work.
This app is an easy and convenient way to convert the .json
file to a .js
file that can be read from a local web page.
I work with a lot these animation files that are frequently changed for different animations files. I also work with a team of motion graphics designers that are not developers. This app can be provided to a member of the team who can convert the file, drop the converted file in a folder and it's good to go - no coding knowledge required.
How to Use
Download the app from the releases page.
Open the app, drag 'n' drop some
.json
files and clickConvert
. The.js
files will be output in the same directory as the.json
files.Include the
.js
file that was created in the previous step in your.html
file. This needs adding before configuring the lottie player with the animation.html <script src="animation.js"></script>
- The animation is then globally available as
window.animationData
and can be used like this:lottie.loadAnimation({ container: element, renderer: 'svg', loop: true, autoplay: true, animationData: window.animationData, });
Development
Simply clone down this repository, install dependencies, and get started.
The use of the yarn package manager is strongly recommended, as opposed to using npm
.
# clone this repo using git clone
git clone https://github.com/jonfranklin301/lottie-json-to-js-converter
cd lottie-json-to-js-converter
# install dependencies
yarn
Development Scripts
# run application in development mode
yarn dev
# compile source code and create webpack output
yarn compile
# `yarn compile` & create build with electron-builder
yarn dist
# `yarn compile` & create unpacked build with electron-builder
yarn dist:dir
This app is based on electron-webpack
. See electron-webpack
's documentation for more info.
License
MIT License (c) Jon Franklin
3 years ago