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!
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.
Change the way the animation will repeat or loop.
Note: During edit all animations show only the first frame.
- 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.
The speed of the animation in times faster or slower than the default for this animation.
- 1.0: Default Speed
- 2.0: 2x times the default speed
- 0.5: Half of the default speed
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.
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.
The background color to show behind the Lottie Animation.
Note: Background color is displayed only on the transparent space of the Lottie Animation.
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.
Similar to Background Color, shadow implementation is displayed differently based on the Lottie Animation.
The color of the shadow.
Tip: You can add opacity/alpha to the Shadow Color in order to add transparency to the shadow.
The blur radius used to render the shadow.
The horizontal offset of the shadow.
The vertical offset of the shadow.