https://github.com/xxmuaddib/lottie-colorify

Change lottie animation colors from code
https://github.com/xxmuaddib/lottie-colorify

Last synced: 3 months ago
JSON representation

Change lottie animation colors from code

• Host: GitHub
• URL: https://github.com/xxmuaddib/lottie-colorify
• Owner: xxmuaddib
• License: mit
• Created: 2020-07-28T11:11:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-11T18:41:54.000Z (4 months ago)
• Last Synced: 2024-10-13T14:45:00.873Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 699 KB
• Stars: 44
• Watchers: 2
• Forks: 19
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lottie - View

README

        
# lottie-colorify

## Note

> I am sorry for leaving this package for a while. currently I am actively maintaining it, so will be happy to review your PRs and merge.

> Also, I will be doing a heavy refactor of the package in the coming 2 months. So if you have any ideas, feel free to write them up in the issues.

Change colors of your lottie animations easily from code.

## Installation

using npm

```shell

npm install lottie-colorify

```

using yarn

```shell

yarn add lottie-colorify

```

## Usage

To change colors of a Lottie JSON:

```jsx static

import Lottie from 'lottie-web';

import { colorify } from 'lottie-colorify';

import SomeAnimation from './SomeAnimation.json';

const animation = Lottie.loadAnimation({

  container: container.current,

  animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),

});

```

To replace a single color of a Lottie JSON:

```jsx static

import Lottie from 'lottie-web';

import { replaceColor } from 'lottie-colorify';

import SomeAnimation from './SomeAnimation.json';

const animation = Lottie.loadAnimation({

  container: container.current,

  animationData: replaceColor('#ef32d0', '#fe0088', SomeAnimation),

});

```

To replace multiple colors of a Lottie JSON:

```jsx static

import Lottie from 'lottie-web';

import { replaceColors } from 'lottie-colorify';

import SomeAnimation from './SomeAnimation.json';

const animation = Lottie.loadAnimation({

  container: container.current,

  animationData: replaceColors(

    [

      ['#ff0071', '#cccccc'],

      ['#f6f6f6', '#000000'],

    ],

    LoadingAnimation,

  ),

});

```

To flatten a Lottie JSON and use only one color:

```jsx static

import Lottie from 'lottie-web';

import { flatten } from 'lottie-colorify';

import SomeAnimation from './SomeAnimation.json';

const animation = Lottie.loadAnimation({

  container: container.current,

  animationData: flatten('#fe0088', SomeAnimation),

});

```

To see the current colors of a Lottie JSON, you can use getColors function:

```jsx static

import Lottie from 'lottie-web';

import { getColors } from 'lottie-colorify';

import SomeAnimation from './SomeAnimation.json';

console.log(getColors(SomeAnimation));

```

## colorify function

colorify takes 2 arguments:

1. colors array (a color can be hex with and without #, an array of RGB values or undefined for using original color in the animation).

2. Lottie animation

## replaceColor function

replaceColor takes 3 arguments

1. source color (the color to look for in a Lottie JSON)

2. target color (the replacement color)

3. Lottie animation

## replaceColors function

replaceColors takes 2 arguments

1. an array of elements containing a `[sourceColor, targetColor]` pair

2. Lottie animation

## flatten function

flatten takes 2 arguments

1. target color (the replacement color)

2. Lottie animation