Lottie

Overview

The Lottie module enables the playback of Lottie animation in Flux sites.

What is a Lottie File?

From Lottie Themselves

A Lottie is an animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. LottieFiles lets you create, edit, test, collaborate on and ship a Lottie in the easiest way possible.

Properties

Source

Default: Animation Above

The Lottie file containing the animation.

Only .json files are supported currently.

Autoplay

Default: True

Whether the animation should start playing when the Module is first displayed. If disabled, the first frame of the animation will be shown when the Module loads.

Loop

Default: True

Whether the animation should loop when it reaches the end of the animation. If disabled, the final frame will be shown when the animation completes.

Playback Direction

Default: Forwards

Whether the animation should play forwards or reversed.

Broadcasters

On Frame

Fires when the animations moves to a new frame.

---

On Complete

Fires when the animation completes. If Loop is enabled, this will not fire.

---

Listeners

Play

When triggered, plays the animation. If the animation is already playing, nothing happens.

---

Pause

When triggered, pauses the animation. If the animation is already paused, nothing happens.

---

Toggle

When triggered, toggles playback of the animation. If paused, starts playing. If playing, pauses.

---

Restart

When triggered, restarts playback of the animation from the first frame. If the animation was paused, it will automatically begin playing.

---

Go To Frame

Parameter	Type	Description
Frame	Number	The frame number to jump to

When triggered, jumps the animation the specified frame. The animation will retain it's current playback status - if playing, will play from the new frame - if paused, will pause at the new frame.

If the target frame is greater than the number of frames in the animation, it will jump to the last frame. If the target frame is less than 0, it will jump to the first frame.

---

Set Progress

Parameter	Type	Description
Process	Number	The percentage of the animation to jump to.

When triggered, jumps the animation to the specified percentage. The animation will retain it's current playback status - if playing, will play from the new frame - if paused, will pause at the new frame.

For example - if an animation is 120 frames long, 50% would jump to frame 60.

If the specified percentage is greater than 100%, it will advance to the last frame. If the specified percentage is less than 0%, it will set the animation to the first frame.

---

Set Playback Direction

Parameter	Type	Description
Direction	"forward" | "reverse"	The direction to playback the animation

When triggered, sets the playback direction of the animation to the specified direction. Playback status is retained - if playing, will continue playing in the specified direction, if paused, will remain paused.