Link Search Menu Expand Document

Lottie Animation View

The Lottie Animation View is the Design Element to display Lottie Animations. Lottie is a library made by Airbnb for iOS, Android, Web and other platforms that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and the web!

Lottie Properties

URL

You can use any public URL that points to the Lottie JSON file.
Tip: Lottie Files is the most popular website to browse free and paid animations.

Loop Mode

Change the way the animation will repeat or loop.
Note: During edit all animations show only the first frame.

Available Values:

  • Play Once: The animation will play once and then will stop.
  • Loop: The animation will loop forever, every time starting from the start.
  • Auto Reverse: The animation will loop forever. The animation will play once in normal(forward) and then in reverse, starting from the last frame, and then will start again from the first frame.
  • Repeat: Similar to Loop, but will repeat only Repeat Times.
  • Repeat Backwards: Similar to Auto Reverse, but will repeat only Repeat Times.

Animation Speed

The speed of the animation in times faster or slower than the default for this animation.

Examples:

  • 1.0: Default Speed
  • 2.0: 2x times the default speed
  • 0.5: Half of the default speed

Repeat Times

The number of times the animation will repeat when Loop Mode is either Repeat or Repeat Backwards.
Note: You can use non-integer numbers, for example, 0.5, to play half of the animation.

View

Alpha

Alpha is a number that alters the transparency of the Lottie Animation. The value ranges between 0.0 and 1.0, where 0.0 makes the View totally transparent and 1.0 totally opaque.
Default value: 1.0

Background Color

The background color to show behind the Lottie Animation.
Note: Background color is displayed only on the transparent space of the Lottie Animation.

Hidden

If enabled, it hides the Lottie Animation.
Note: Hiding the Lottie Animation View will not stop or pause the actual animation, so you are responsible to stop and restart the animation.
Tip: Even though Lottie Animations are rendered natively, so they have excellent performance, it is a good practice to stop them when you do not need them, even when they are hidden.

Shadow

Similar to Background Color, shadow implementation is displayed differently based on the Lottie Animation.

Shadow Color

The color of the shadow.
Tip: You can add opacity/alpha to the Shadow Color in order to add transparency to the shadow.

Shadow Blur

The blur radius used to render the shadow.

Shadow X Offset

The horizontal offset of the shadow.

Shadow Y Offset

The vertical offset of the shadow.

Lottie Files

LottieFiles.com is the world’s largest online platform to Discover Lottie Animations. You will need to Register on their website to copy the URL of the JSON file.