Basic Usage

You can put a <LottiePlayer> anywhere inside a page or component. It will generate a div element container holding the Lottie Animation you put into the Src property. There are lots of properties to control the animation, as well as Actions and Events to capture information. The Lottie Player only accepts JSON files as source, so you can use the Src property to point to a local or remote JSON file.

Properties

The <LottiePlayer> component has several properties that you can use to customize its behavior. Most properties will force a re-render and synchronization of the Lottie Animation, so be careful when using them if you are trying to maintain state. Some Properties are initialized and ignored if changed after initial render. See the API for details.

Actions

The <LottiePlayer> component has several actions that can be performed on it after initialization including what's seen in the above examples. Play, Pause, Stop, SetSpeed, SetDirection allow you to control the animation using these Actions. The LottiePlayerModule is accessible from the component as well and has access to the ExecuteActionAsync method where you can feed it the action such as stop followed by an object array for parameters that will be passed to it. In javascript that will become animation.stop(args...)

Advanced

The <LottiePlayer> component has several more advanced features such as the ability to roll your own component using just the LottiePlayerModule class. As well you can look at a few different animations here with the ability to resize accordingly.

API

Loading API documentation...

Loading API documentation...