@atomico/lottie

Webcomponent built with Atomico JS to use lottie as webcomponent. Includes additional support for React and Preact.

Differences with lottie file

1. Faster and smaller

2. Non-blocking, thanks to lazy loading.

Modules

Default

import { Lottie } from "@atomico/components/lottie";

Elements

// Import that does not associate the tagName by default
import { Lottie } from "@atomico/lottie/elements";

React

import { Lottie } from "@atomico/components/lottie/react";

Preact

Html CDN

<script 
    type="module" 
    src="http://esm.sh/@atomico/lottie"></script>
    
<atomico-lottie></atomico-lottie>

Properties

cdn: boolean , import lottie-web from a CDN, by default https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.1/lottie.min.js, this can be modified through the existing cdn object in the module, by default it is false.

path: string, animation path, compatible with lottiefiles

loop: boolean, the animation plays in a loop.

lazyload: boolean, the animation is downloaded when an interception occurs

intersectionOffset : string, defines the offset for interception loading or animation playback.

intersectionControl: boolean, if true the animation is played only on interception.

intersectionControlReplay: boolean, each intercept restarts the animation.

Examples

React

@atomico/lottie (React) - StackBlitzStackBlitz