Skip to main content
Version: v11.8.5

Lottie Widget (Beta)


Lottie Animations are very popular and are very easy to control through JavaScript code. Lottie Widget helps to show the Lottie animations in WaveMaker.

note

Lottie Widget is supported only in React Native applications in WaveMaker.

Lottie Widget Properties

PropertyDescription
NameThe name is a unique identifier for the video widget.
Animation
SourceLocation of the Lottie animation JSON file.
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Behavior
ShowShowing determines whether or not a component is visible.
Enable AutoplayThis property allows you to enable if and how the author thinks the animation should be loaded when the page loads.
LoopThis property allows you to enable that the animation will start over again, every time it is finished.
SpeedSet the control of speed. By default, speed is 1. Negative values of speed will make animation to run in reverse direction.

Methods

Lottie Widget Methods for Animation Control

The following methods are available to interact with the Lottie widget using JavaScript.

  1. Start/Resume Animation:
Page.Widgets.lottie1.play();
  1. Stop/Pause Animation:
Page.Widgets.lottie1.pause();
  1. Restart Animation:
Page.Widgets.lottie1.reset();

These methods provide control over the playback of the animation using the Lottie widget.

Events

The following events are available on the Lottie widget.

EventDescription
On ReadyThis property defines the event handler to be called when the animation is loaded and is ready to play.
On PauseThis property defines the event handler to be called when the animation is paused.
On PlayThis property defines the event handler to be called when the animation is played or resumed.
On CompleteThis property defines the event handler to be called when the animation is completed.