Animations with LottieFiles in Tiled

Follow

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.

⚠️
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.


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.

Finding_Lottie.gif

2. Find the section Use this animation in... and click on the <html> button to create the embed code for the Lottie.

ezgif.com-gif-maker.gif

3. Adjust the settings of the LottieFile.

  • Update the Height and Width to 100%.
  • Adjust the animation directive settings to your preference.

 

grabbing_code.gif

4. Now, in the Tiled Microapp Editor Copy and Paste the Embed code into a Script Tile.

ezgif.com-gif-maker__1_.gif


Animation Directives are properties of the LottieFile which determine how it behaves inside of your microapp. There are 4 Animation Directives:

  1. Controls: The animation will display Play/Pause controls. (We usually turn these off when building microapps.
  2. Autoplay: The animation will autoplay upon page load in your microapp.
  3. Hover: The animation will trigger when the cursor hovers over the script tile.
  4. 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

    Screen_Shot_2021-12-02_at_4.05.37_PM.png

     

    AFTER

    Screen_Shot_2021-12-02_at_4.05.49_PM.png

  • 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.
5 out of 5 found this helpful

Comments

0 comments

Please sign in to leave a comment.