A LottieFile (Lottie) is a JSON-based 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. Lotties are a great way to make your microapps come alive. Lotties are embeddable animations that can help guide your audience through a microapp experience and set your content apart from static documents.
Add a Lottie Tile
- Adding an animation in Tiled usually begins with identifying the animation you would like to use in your microapp. We recommend using the LottieFiles Animation Library. After you identify the animation you would like to use, you'll need to:
- Save the Animation to your Workspace in order to generate an Asset Link.
- Under Handoff, Enable asset CDN
- Under Asset Link Format, you'll need to switch from Lottie's default (dotLottie) to Lottie JSON
- Copy the .json Asset Link shown above from your animation.
- Paste that URL into the Properties Panel for the Lottie Tile and decide on directive behaviors below
Lottie Animation Directives
Animation Directives are properties of the LottieFile that determine how it behaves inside of your microapp.
| Animation Directive | Description |
|---|---|
| Loop | The animation will loop indefinitely. |
| Autoplay | The animation will autoplay upon page load in your microapp. |
| Hover | The animation will trigger when the cursor hovers over the script tile. |
Link your Lottie
In the event that you're Lottie has a hover enabled, you might need a way for it to be clickable within adding a hotspot over the top of it (as it'll block your hover interaction). You can configure this link as a Click Event at the bottom of the Properties Panel.
