Using Interactive Lotties
Options for exporting, embedding and playing Interactive Lotties on your own websites and apps.
Last updated
Options for exporting, embedding and playing Interactive Lotties on your own websites and apps.
Last updated
At the moment, we consider Lottielab Interactivity a beta feature. The only Lottie player that implements full support for Interactive Lotties is Lottielab's Lottie player.
This player exposes a generic Web component, as well as a React one. It works only on the Web, so it has no native mobile support presently.
An Interactive Lottie is still backwards compatible with all other players. However, when played using another player, it will play back as a normal animation, without any interactivity.
Livelink embeds (Embed Link tab in the Export panel) use Lottielab's player by default, which means they fully support all of Lottielab Interactivity out of the box. In a lot of cases, this is the perfect way to embed your interactive animation on your website.
The Lottielab player allows you to deeply integrate and control Interactive Lotties from your own code, if you wish to do so. More details below.
When clicking the Export button at the top right of Lottielab, you will get a tailored experience in case you have created an Interactive Lottie.
To ensure the easiest experience, simply choose your platform in the list at the bottom to get specific
instructions using your platform of choice. If you cannot find your platform, try clicking on See More. If it's still not there, you can try using the generic HTML or JavaScript instructions, or using the iFrame code or Embed link for an HTML embed.
These instructions will guide you towards using either the embed link or using Lottielab's own player and the JSON link.
If you want tighter control over the Lottie, you can download it and, for example, version it in your git repository. The downloaded Lottie still retains all of the interactivity information and will play as intended when using Lottielab's player. See technical details below.
Lottielab's player is well documented. See one of the resources below:
The player allows you to dynamically inspect and change the state of an Interactive Lottie from code, as well as make it respond to your app's custom events and variables.
This is a powerful feature that allows you to go one step further―instead of Interactive Lotties being just animations with a little extra flavor, they can become fully-featured components of your web apps and UIs.
Since Lottielab Interactivity combines so well with Livelink, their combination even allows you to decouple the lifecycle and delivery of non-mission-critical, marketing-oriented parts of the UI from the development lifecycle.
The interactivity examples and docs linked above provide more details.
An Interactive Lottie contains a special piece of JSON, called the Interactivity Definition, inside one if its metadata fields:
This field is ignored by all non-conforming players, so they will play the Lottie as a normal animation.
Lottielab's player knows how to read this field. Upon encountering it, it will change the mode of the Lottie to interactive and set up all of the necessary events to make sure the Lottie responds as designed.
You can introspect and change the interactive state by using the .interactivity field of the Lottie player. See above for player docs.
