Best Practices
      Back to home
      1. Support
      2. Tiled Builder
      3. Best Practices

      How to use a GIF in a microapp

      Adding animations to your microapp is a great way to introduce interactivity to your content. Animations can help you to guide your audience through a microapp experience and set your content apart from static documents.

      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 the design affords.
      3. Send the GIF through lossy compression. You can do this for free on EZGIF.com.

      2. Add the GIF to the Tiled Asset Library

      Once your GIF is compressed, upload the file the Tiled Asset Library, just 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)

      Animation directives are not achievable with .gif or .mov files.

      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.

      Using animations inside your microapp are best achieved using LottieFiles while GIFs are best used for achieving animation in your microapp cover image. Please note that using LottieFiles in your microapp requires internet connectivity which is not supported in offline microapps. Using GIFs does not require internet activity.
      Read LottieFiles Documentation