Skip to main content

Lottie Element

The Lottie Element represents a Lottie resource imported into the project. This element can be dynamically modified, using built-in API functions.

Lottie Element example
Lottie Element example

To import a Lottie Element, navigate to the Import option in the menubar and select Resource, or just drag and drop Lottie file into Loopic.

Supported formats​

Loopic supports Lottie files in .json format.

How to export Lottie file from Adobe After Effects?​

In order to export a Lottie animation from Adobe After Effects, you will need a plugin for After Effects that can handle the conversion. The plugin is called Bodymovin, and it's available at this link.

  1. Install the plugin.

  2. Open your desired After Effects composition and go to Window > Extensions > Bodymovin.

Opening Bodymovin plugin
Opening Bodymovin plugin
  1. In the Bodymovin UI, select the composition that you want to export.
Selecting composition to export
Selecting composition to export
  1. Open the settings for that composition.
Opening settings for composition
Opening settings for composition

  1. Select the following options:

    • Bundle Fonts
    • Inline Fonts
    • Hidden
General settings
General settings

Under the "Assets" menu, select:

  • Include in JSON
Assets settings
Assets settings

Under "Export Modes", select:

  • Standard
Export settings
Export settings

Save and close settings.

  1. Choose destination folder.
Choosing destination folder
Choosing destination folder
  1. Click the Render button to export Lottie file.
Rendering
Rendering

What After Effects features are supported in Lottie?​

To learn more about which After Effects features are supported by Lottie, check the official lottie-web documentation.