Utility functions for parsing color & text information from lottie-web JSONs.
npm install lottie-web-parser
bash
$ npm install lottie-web-parser
`
Then, import this package into your app (you might need a build tool like webpack if wanting to run in the browser.
API
$3
Checks if the animation data passed as argument has text information or not.
`javascript
import LottieWebParser from 'lottie-web-parser';
import animationData from './data.js';
LottieWebParser.hasTextLayers();
`
$3
Parses the animationData and returns an array of color information, including the name of the shape/layer.
`javascript
import LottieWebParser from 'lottie-web-parser';
import animationData from './data.js';
let colorInfo = LottieWebParser.parseColors(animationData);
console.log(colorInfo);
`
$3
Params:
* rgba: Array
* path: string
* animationData: JSON object
Modifies the animationData in place, by replacing the color value found at that path after it adjusts the values:
* if the current color values are in [0-1] then it will normalize to this interval
* otherwise it will use the real values
`javascript
import LottieWebParser from 'lottie-web-parser';
import animationData from './data.js';
let colorInfo = LottieWebParser.parseColors(animationData);
LottieWebParser.replaceColor([255, 0, 0, 1], colorInfo[0].path, animationData);
`
$3
Params:
* rgba: Array
* path: string
* animationData: JSON object
Modifies the animation data in place, by replacing the value found at that path. Similar to replaceColor above, it adjusts the values.
`javascript
import LottieWebParser from 'lottie-web-parser';
import animationData from './data.js';
let path = 'layers.5.shapes.2.c.k.0';
LottieWebParser.replaceColor([255, 0, 0, 1], path, animationData);
`
$3
Params:
* path: string
* animationData: JSON object
Returns the color values at path. If the values are in [0, 1] interval it will adjust them to the RGB interval [0-255].
$3
Parses the animationData and returns an array of text information.
`javascript
import LottieWebParser from 'lottie-web-parser';
import animationData from './data.js';
if (LottieWebParser.hasTextLayers(animationData)) {
let textInfo = LottieWebParser.parseTexts(animationData);
console.log(textInfo);
}
`
`js
// Example response
[{
name: 't1',
text: 'Type something here',
fontName: 'Roboto-Black',
fontFamily: 'Roboto',
path: layers.2.t.d.k.0.s.t
}]
``
Made with ❤ by Pava for Flixier