Plugins

The DotLottiePlugin abstract class is available here

dotLottie uses a plugin system to allow for flexibility and customization of the dotLottie creation pipeline. Plugins are called on during the build() phase where animation data and image assets have been fetched. Plugins can then act upon the dotLottie context of these animations and modify the data. Some use cases could be to optimize the file size of image assets, run an optimization algorithm on the animation data, run tests..

In this example, we show how the duplicate image detecting plugin is made.

Creating a custom plugin

  1. Create your plugin class
export class DuplicateImageDetector extends DotLottiePlugin
  1. Implement your onBuild(): Promise<void> method
  public async onBuild(): Promise<void> {
    if (!this.dotlottie) throw createError('dotLottie context is null inside of duplicate image detector plugin.');


    // If there is only one animation, the LottieAnimation class will manage duplicates if its activated
    if (this.dotlottie.animations.length <= 1) return;


    // Create a record of duplicates
    const recordOfDuplicates: Record<string, [LottieImage]> = await this._createRecordOfDuplicates();


    // Check the record of duplicates and repath the duplicate images
    this.dotlottie.animations.forEach((animation) => {
      animation.adjustDuplicateImageAssetPath(recordOfDuplicates);
      animation.filterOutDuplicates(recordOfDuplicates);
    });
  }
  1. Don’t forget to add your plugin to your DotLottie instance
const dotLottie = new DotLottie();
const myPlugin = new AwesomePlugin();


dotLottie.addPlugins(myPlugin);
  1. Plugins’ onBuild() method is called when calling build() on the dotLottie instance
const dotLottie = new DotLottie();
const myPlugin = new AwesomePlugin();


dotLottie.addPlugins(myPlugin);


dotLottie.addAnimation({
      id: 'animation_0',
      data: animationData as AnimationData
});


// build will call plugin.onBuild()
dotLottie.build();
dotLottie.download('my_animation.lottie');