How to use a GIF in a Microapp

Learn how to add animations to your Microapps with .gifs and .mov files.

1. Optimize your GIF

Before uploading a GIF to the Tiled Asset library be sure to:

1. Shorten the GIF to the least amount of frames as possible.
2. Adjust the dimensions of the GIF to be small as it can be afforded in the design.
3. Send the GIF through lossy compression. You can do this for free on EZGIF.com.

2. Adding your GIF to the Tiled Asset Library

Once you have your compressed GIF file you will need to upload the file the Tiled asset Library, like all other media used in your microapps.

3. Drag your GIF onto the Microapp Canvas

Drag and drop the GIF from the asset library onto your microapp canvas. Upon dropping the GIF onto the microapp canvas the file will immediately nest itself inside of an image tile. From here you can adjust the position and size of your GIF, just like a standard Image Tile.

Autoplay Controls - The ability to turn autoplay on/off.
Loop Controls -  The ability to turn looping on/off.
Speed Controls - The ability to alter the speed of the animation.
Hover Effects - The ability to "activate" your animation when your cursor hovers. (Desktop only)

Important Considerations:

• .gif files will autoplay and loop by default.
• Tiled supports offline access to microapps inside of your Tiled library, however if you use the script tile with an embedded LottieFile, your animation may not load since it requires internet connectivity.
  
  
• Using .gif or .mov files in your microapp to achieve animations may impact the performance of your microapp, so it is advised to use these file types sparingly.