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.


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


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.



Last updated