English
GithubTwitterDiscordPlayground
Ask or search…
⌃K
Links
Comment on page

@atomico/lottie

Webcomponent built with Atomico JS to use lottie as webcomponent. Includes additional support for React and Preact.
Differences with lottie file
  1. 1.
    Faster and smaller
  2. 2.
    Non-blocking, thanks to lazy loading.

Modules

Default
Elements
React
Preact
Html CDN
import { Lottie } from "@atomico/components/lottie";
// Import that does not associate the tagName by default
import { Lottie } from "@atomico/lottie/elements";
import { Lottie } from "@atomico/components/lottie/react";
​
<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
Previous
@atomico/modal
Next
@atomico/table
Last modified 1yr ago