Lottie Support in Flowics: User Guide

Download and install the BodyMovin extension from here.
​Note: After installing the plugin close the after effects and re-open it.
​

In After Effects, navigate to Edit > Preferences > Scripting & Expressions.
​

​

Enable the option Allow Scripts to Write Files and Access Network.
​

​

Open your project and ensure that text layers remain as text (not converted to shapes).

Avoid special characters or unsupported features like Illustrator layers.

Ensure text layers in After Effects are actual text layers.

Do not bundle fonts when exporting.
​

Go to Window > Extensions > BodyMovin.
​

Select your composition and open the plugin settings.

Uncheck the Glyphs option to ensure text layers remain editable.
​

To embed raster images, enable Include in JSON under the Assets section.
​

Select the layer, click the 3 dots, and save it in your files
​

Click the render button in BodyMovin to export the animation.
​

After the layer has been rendered, click on Done. A JSON file of the animation will be generated.
​

Test the exported animation using the LottieFiles Preview Page and check for compatibility issues with their Feature Support Checker. Common issues include unsupported gradients or missing fonts. For example, gradients may render as solid colors if improperly configured, and fonts might need to be uploaded manually if not included in the JSON. Resolving these typically involves reconfiguring the original animation or adjusting plugin settings before re-exporting.

Once rendered, Flowics will process the fonts, allowing users to upload and select font families via the Graphics Editor.

Go to the Assets Library in the Graphics Editor and upload your JSON file.
​

Drag a Lottie element into your graphic tree and select the uploaded JSON file.
​

Configure playback options such as looping, speed, and reverse play through the settings panel available in the Graphics Editor when a Lottie element is selected.

Use the Subframes option for smoother playback matching the original animation framerate.
​

Lottie animations with editable texts will display fields in the Inspector.

Adjust text dynamically during playback or while the animation is paused.

Upload custom fonts if needed and assign them in the Fonts page of the Graphics Editor.
​

Expose editable text fields for remote control by toggling the Editable Content section in the Inspector.
​

Only .json files are supported. .lottie or .dotLottie files are not compatible.
​

Rasterized images can increase JSON file size. Adjust compression ratios if needed.
​

Gradients may not export correctly if created with non-English settings or specific plugins. For additional guidance, check this Gradient Export Guide, which includes solutions for common gradient issues in Lottie animations.

Avoid using special characters or unsupported layer types.
​

Only text layers and standard fonts are editable. Glyph-based text is not supported.
​

For Illustrator layers, convert to shapes before exporting to avoid quality loss.
​

Ensure Scripting is enabled in Preferences and restart After Effec