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.Faster and smaller
- 2.Non-blocking, thanks to lazy loading.
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>
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 lottiefilesloop:
boolean
, the animation plays in a loop.lazyload:
boolean
, the animation is downloaded when an interception occursintersectionOffset :
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.React
Last modified 1yr ago