Export for Web (Lottie)

Note

Available since Synfig Studio 1.4.0.

Synfig Studio can export animations to Lottie JSON format, which allows to embed them into web pages, play them natively in web browser and on mobile platforms. This format is also used for creating Telegram’s animated stickers!

Currently it is capable to export most main graphic elements, with animation and some converters applied to their parameters (see detailed list of supported layers and parameters on this page).





To export your animation file, choose “Plugins” - “Export to Lottie” from menu. This will export the currently opened file to Lottie format.

../_images/lottie-export.png

After the export, you’ll have 3 files in the same directory as your animation: FILE.html, FILE.json and FILE.log.

  • FILE.json is the main file where the Lottie format animation resides. Use it if you want to embed your animation to some webpage. Here is an example implementation at codepen.io. FILE.json can be directly played using lottiefiles.com.
  • FILE.html can be used to watch exported animation in a browser like Firefox or Google Chrome.
  • FILE.log stores all messages/errors appeared during the export. If a layer is not supported, it will be notified in this file.

Limitations:

  • Exporting Bones (Skeleton) animation is not implemented yet.
  • Layers like region, outline, and polygon are exported frame-by-frame because there is no exact alternative provided by Lottie and hence the animations might lag on larger displays.
  • Animation of addition/deletion of spline points is not supported as Lottie format does not provides this feature.