1. Tiled
  2. Building Microapps
  3. Best Practices

How to use a GIF in a microapp

Last update:

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.

⚠️ IMPORTANT NOTE

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

Comments

0 comments

Please sign in to leave a comment.