after_effect_animation.png

Export your animations in JSON format from After Effects with Bodymovin, optimize the weight and improve the quality of your animations. Insert them using the After Effects component, create markers on frames, interact and synchronize with other components (scrolling, movement...).

Export your animation in JSON with Bodymovin plug-in

Bodymovin is a plug-in designed by AirBnB teams to export your After Effects animations for the web (in SVG + Javascript).
 
 
Open your project in After Effect.
 
Go to Windows > Extensions and open the Bodymovin plug-in.
 
Select the composition you wish to export and choose a destination folder. 
 
Click on the Render button to see the rendering of the composition and preview your animation.
 
 
render_bodymovin.jpg
 
 
Go to the destination folder and find your animation in .json format. If you had images, you also have an Images folder.
 
Select all files at the root and compress to ZIP format.
 
 

The After Effects component

Click on Components and insert the After Effects component.
 
 
after_effect_component.png
 
 
Import the ZIP folder of your animation in the Properties window.
 
Specify the file name (lorem.json) so that it is displayed correctly in the studio.
 
 
AE_component_properties.png
 
 
Customize the animation with the following properties: loop, speed (min/max) and auto play.
 
By default, the After Effects animation is based on the web view, which allows for greater compatibility. You can choose to use the native iOS and/or Android version for better performance, but beware of compatibility.
 
 

Markers

Identify one or more frames in your animation that will serve as a trigger or object for an action.
 
Click + Add Marker.
 
 
marker_component_AE.png
 
 

Interactions & Synchronization

Trigger an action from your After Effects animation

Select your animation and open the Interactivity window.
 
Here are the available triggers:
  • Finish playing
  • Pause playing
  • Starting play
  • Stopping play
     
triggers_component_AE.png
 
 

Create an action on your After Effects animation

Choose an object, the trigger and the Interact with a component action in the Interactivity window.
 
Here are the available actions:
  • Change frame
  • Increase/decrease speed
  • Forward/Rewind
  • Pause
  • Play
  • Restart from beginning
  • Set speed
  • Stop
  • Seek
 
actions_component_AE.png
 
 

Synchronize with another component

To synchronize your AE animation with another component (e.g. motion sensor), insert the Synchronization component from Components list.

In the Properties window, click Add Component. Choose the AE component and the other component from the list. Select the AE component and click Frames in the options.

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

Create apps and interactive experiences without any coding

Easy-to-use ∗ Free ∗ No installation

Sign up free