Learn how to add animations to your Microapps with LottieFiles. We'll explore adding and editing LottieFile Embed Codes inside of your Tiled Microapp Builder.
⚠️
|
Skip to Tutorial Videos 🎥
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.
|
1. Find an animation to use in your microapp and click to open the animation preview window. |
 |
|
|
2. Find the section Use this animation in... and click on the <html> button to create the embed code for the Lottie. |
 |
|
|
3. Adjust the settings of the LottieFile.
|
 |
|
|
4. Now, in the Tiled Microapp Editor Copy and Paste the Embed code into a Script Tile. |
 |
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! |
Adding A LottieFile to your 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.
Comments
Please sign in to leave a comment.