After Effects Animations

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.pngImport 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.pngCustomize 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.

 

Still need help? Contact Us Contact Us