@codeleap/lottie-editor

Lottie Editor

Edit lottie files programmatically. Made with tinycolor2 and a lot of recursion.

Currently only supports editing colors.

Features

• CLI for inspecting colors in lottie files
• Typesafety
• Supports tons of color formats
• Edit animation colors in one line
• Environment agnostic

Usage

Change colors

import fs from 'fs'
import { LottieAnimation } from '@codeleap/lottie-editor'

// This can be any lottie json
const json = JSON.parse(fs.readFileSync('./animation.json').toString())

const animation = new LottieAnimation(json)

const firstColorPath = Object.keys(animation.colors)[0] 

// Will output something like assets.0.layers.0.shapes.0.it.1.c.k. This is the path of a single color inside lottie's json
console.log(firstColorPath)

// This is a tinycolor object. All of it's methods (such as toRgbString()) are available.
console.log(animation.colors[firstColorPath]._color?.toRgbString())

// You can use any color like string supported by tinycolor2 in the place of #ff0000
animation.colors[firstColorPath].color = '#ff0000'

// This will set the colors in lottie's format inside animation.animationData
animation.saveColors()

// Additionally, now the lottie object includes metadata about it's colors. Useful for inspecting colors inside animations in vscode if you save the file
console.log('animationData.colors', animation.animationData?.colors)

// In react, you may simply pass animation.animationData to <Lottie /> and the colors will be correct

// When this file is rendered by lottie, it will have the colors you altered
fs.writeFileSync('./animation-red.json', JSON.stringify(animation.animationData), {
    encoding: 'utf-8'
})