Bodymovin Widget Tutorial

The Bodymovin Widget allows you to use shape layer animations exported from Adobe After Effects in your compositions when building in Composer. These animations load faster and are higher in quality than .gif files.  

1 - Install Bodymovin plugin

Download the plugin here: https://aescripts.com/bodymovin/

2 - Create your animation in After Effects

Bodymovin converts shape layer animations to JSON files, so be sure your animation uses only shape layers.

3 - Export using Bodymovin plugin

Check out the video below from the Bodymovin website for how to export using their plugin.

  

Note

When exporting your JSON from After Effects, make sure to check "Advanced > Export old json format" in order for the JSON to be compatible in Singular. See the image below:

 

Bodymovin_Widget_JSON_export_settings.png

Select Advanced export features and then choose "Export old json format"

 

4 - Import JSON into Singular Dashboard

Drag the JSON file from your computer into your desired folder within Singular's Dashboard to import it onto Singular's servers.

ImportJSON.gif

Drag and drop the JSON file to import

 

5 - Open Singular JSON file and copy URL

Double click the JSON file within your Dashboard to open it, then copy the URL of the JSON.

CopyURL.gif

Copy the JSON URL

 

6 - Add Bodymovin Widget

Access the Widget Library to add the Bodymovin Widget to your composition.

Add_widget.gif

Select the Bodymovin Widget from the Widget Library

 

7 - Paste URL into widget property field

Navigate to the Bodymovin property tab in the Property Panel, then paste the JSON URL into the proper field.

Paste.gif

Paste the JSON URL

 

8 - Add auto-play and looping

If you wish, check the boxes for auto-play and loop to get your Bodymovin animation to begin automatically and loop endlessly.

loop.gif

Adjust the Auto-Play and Loop properties

 

9 - Adjust Animation length

Because every widget you add automatically is given Singular's default animation length, you'll want to manually adjust the length of the widget's animation, within the Animation tab, to ensure it isn't shorter than the length of your Bodymovin animation. If the Singular animation is shorter, the Bodymovin animation could get cut off.

Important

If the Singular Animation timeline is shorter than your imported animation, the Bodymovin animation could get cut off. So . . . double check your timeline animation length!

Timeline.gif

Adjust the timeline animation length if needed

Was this article helpful?
2 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.