Export your animations in .json format from After Effects, 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
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.
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.
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.
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.
Identify one or more frames in your animation that will serve as a trigger or object for an action.
Click + Add Marker.
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
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
- Restart from beginning
- Set speed
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.