Usage Scenarios

Common usage of dotlottie-js

Create a dotLottie and download as file (browser only)

import { DotLottie } from 'dotlottie-js';

const dotlottie = await (new DotLottie()
  .addAnimation({
    id: 'animation_1',
    data: 'https://assets3.lottiefiles.com/packages/lf20_5jxqjx.json',
    speed: 1,
    loop: true
  })
  .build());

await Dotlottie.download('my_animation.lottie')

Create a dotLottie and download as a buffer

import { DotLottie } from 'dotlottie-js';

const dotlottie = await (new DotLottie()
  .addAnimation({
    id: 'animation_1',
    data: 'https://assets3.lottiefiles.com/packages/lf20_5jxqjx.json',
    speed: 1,
    loop: true,
  })
  .build());

const buffer = dotlottie.toArrayBuffer();

Set the manifest of a dotLottie

import { DotLottie } from 'dotlottie-js';

const dotlottie = await (new DotLottie()
  	.setAuthor('Ashraf')
	.setVersion('1.0.0')
	.setDescription('Some description')
	.setKeywords('keywords')
	.setGenerator('generator')
        .addAnimation({
	  id: 'animation_1',
	  data: 'https://assets3.lottiefiles.com/packages/lf20_5jxqjx.json'
	})
  .build())


const manifest = dotlottie.manifest

Build from a pre-existing dotLottie and add an animation

import { DotLottie } from 'dotlottie-js';

let existingDotLottie = new DotLottie();
existingDotLottie = await existingDotLottie.fromURL('https://assets3.lottiefiles.com/packages/lf20_5jxqjx.lottie')


await (existingDotlottie
      .addAnimation({
	      id: 'animation_1',
	      data: 'https://assets3.lottiefiles.com/packages/lf20_5jxqjx.json',
	      speed: 1,
	      loop: true,
      })
	    .build())


const buffer = newDotlottie.toArrayBuffer();

Merge multiple dotLotties

import { DotLottie } from 'dotlottie-js';

const dotlottie1 = new DotLottie().addAnimation({
      id: 'lottie1',
      data: animationData as AnimationData,
});

const dotlottie2 = new DotLottie().addAnimation({
      id: 'lottie2',
      data: animationData as AnimationData,
});

let mergedDotlottie = new DotLottie();

mergedDotlottie = await mergedDotlottie.merge(dotlottie1, dotlottie2).build();Ï

Get all animations from the dotLottie

import { DotLottie } from 'dotlottie-js';

let dotLottie = new DotLottie();
const dotLottie = await dotLottie.fromAsync('https://assets3.lottiefiles.com/packages/lf20_5jxqjx.lottie');

const animations: Array<[string, LottieAnimationCommon] = dotLottie.getAnimations();

animations.map(animation => {
 // animation.toArrayBuffer();
 // animation.toJSON();
 // animation.toBlob();
}

Remove animation from dotLottie

import { DotLottie } from 'dotlottie-js';

const dotlottie = await (new Dotlottie()
  .addAnimation({
    id: 'animation_1',
    data: 'https://assets3.lottiefiles.com/packages/lf20_5jxqjx.json',
  })
  .removeAnimation('animation_1')
  .build())

Add an animation (.json) from a URL to a dotLottie

import { DotLottie } from 'dotlottie-js';

const dotlottie = await (new Dotlottie()
  .addAnimation({
    id: 'animation_1',
    url: 'https://assets3.lottiefiles.com/packages/lf20_5jxqjx.json',
  })
  .build())

Add animation data (.json) to a dotLottie

import { DotLottie } from 'dotlottie-js';

import animationJson from './animation.json';

const dotlottie = await (new DotLottie()
  .addAnimation({
    id: 'animation_1',
    data: animationJson,
  })
  .build())