LottieFiles are a great way to make your microapps come alive. LottieFiles are embeddable animations that can help guide your audience through a microapp experience and set your content apart from static documents.
Add a LottieFile to your microapp
- Adding an animation in Tiled usually begins with identifying the animation you would like to use in your microapp. We recommend using LottieFiles Animation Library. Click the animation preview window.
- Find the section Use this animation in... and click on the <html> button to create the embed code for the animation.
- Adjust the settings of the LottieFile. Update both Height and Width to 100%. Adjust the animation directive settings to your preference.
- Copy and Paste the Embed code into a Script Tile within your microapp canvas.
Animation Directives are properties of the LottieFile which determine how it behaves inside of your microapp. There are 4 Animation Directives:
- Controls: The animation will display Play/Pause controls. (We usually turn these off when building microapps.
- Autoplay: The animation will autoplay upon page load in your microapp.
- Hover: The animation will trigger when the cursor hovers over the script tile.
- Loop: The animation will loop indefinitely.
| Below is an embedded microapp that demonstrates the different animation combination settings. This provides a good example of using animations in a microapp. Hovering over the animation will work - even inside an embedded microapp! |
Editing a LottieFile Inside of the Tiled Builder
Important Considerations
- Adding any tile on top of the Script tile can prevent the animation from loading.
- Autoplay, Hover, or both need to be present in the LottieFile script in order to activate the animation in the microapp. Without one of these animations directives the LottieFile will not load.
- It is possible to adjust the animation directives of the LottieFile inside of the Script Tile. For example, if you originally created the embed code to loop the animation you can remove the loop by deleting "loop" from the code. See Example Below
BEFORE
AFTER
- Adding additional code into your microapp via the Script Tile can impact the performance of your microapp. We have observed that adding animations over 25kb can even prevent your microapp from being viewed altogether. We recommend choosing animations no larger than 25kb and using no more than 20 animations across the entire microapp. We are actively working to improve this feature.
- Interactive LottieFiles do not work with Tiled.
⚠️ Tiled does not support exporting LottieFiles from Adobe XD.
In order to use a LottieFile in Tiled you must add the animation to your microapp via the Script Tile.
Comments
Please sign in to leave a comment.