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, click the animation preview window.
- Find the section Lottie Animation URL and copy the URL.
- From the Tiled Builder, drag and drop the Lottie Tile onto the canvas.
- Resize and reposition the Lottie Tile.
- Paste Lottie Animation URL in the Lottie URL section.
- Select an Animation Directive.
- Preview your Lottie to confirm that it is rendering correctly in your microapp!
Tiled allows users to link to specify how they would like their viewers to interact with the Lottie Tile. When linking to a page from a Lottie Tile you can use a Page as the destination target.
The graphic below shows a sample on how to link a page.
- Select the desired action Link to Page.
- Under the page section, select the desired page you wish to use as the target. Tiled lists all the available microapp pages available in the dropdown. Below is an example.
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. |
Delete a Lottie Tile
To delete a Lottie Tile, ensure that the tile is selected and press the DELETE key.