Adobe After Effects animations in PubCoder with Bodymovin

People often ask us if it’s possible to use After Effects animations inside PubCoder publications: the answer is yes and it’s actually easy to do this, and the results are really cool.

Let’s see how it works.

First of all, you need to install a free After Effects add-on called Bodymovin. This allows you to export AE animations to svg/canvas/html + javascript (or even natively on Android and iOS through Lottie).

Once installed, you can bring it up in AE from the menu Window / Extensions / Bodymovin. Select a composition in your project and choose a destination folder for the bodymovin animation, then click render:

Bodymovin will export a file with json extension containing the data for the animation. To play the animation in our PubCoder project, we also need the Bodymovin JavaScript library, you can get it by clicking on the “Get the Player” button:

Let’s move on to PubCoder. Open your project in PubCoder or create a new one, then switch to the “Assets” tab in the left panel. Drag & drop the bodymovin.js and your json animation files, as previously exported from After Effects, to the Assets panel.

Now we need to load the Bodymovin library in our PubCoder project, this needs to be done only once per project. Right-click the bodymovin.js we just imported and choose “Attach Asset and Copy URL”. This will bundle the file together with your export.

update: in newer versions of bodymovin the Javascript library file is named lottie.js so use that file in place of bodymovin.js.

Click the “Code” button and choose “Project HTML Head”, then add the following code:

<script type="text/javascript" src="../uncategorized/bodymovin.js" ></script>

Now our project can handle Bodymovin animations. Let’s try to insert the one we previously imported on a page: of course you’ll need a smart object to do this, so drag one from the Objects panel to the stage, resize it as desired and double-click it to bring up the code editor. Paste the following code:

<script type="text/javascript"><![CDATA[
$(window).on(PubCoder.Events.PageReady, function() {
 var animData = {
        container: document.getElementById('YOUR_SMART_OBJECT_ID'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'ANIMATION_URL'
    };
    window.myAnimation = bodymovin.loadAnimation(animData);
});
]]></script>

Of course you need to replace YOUR_SMART_OBJECT_ID with the real ID of your smart object (you can see it in the Layers panel in the code editor). You finally need to get the URL of your bodymovin-exported animation file and replace it to ANIMATION_URL in the code. Switch to the Assets panel in the code editor, right click your animation JSON file and choose Attach Asset and Copy URL, then paste in the code.

You can now close the code editor and preview your project to see the result: the animation should be playing in loop.

The loop and autoplay behaviors can be turned off by switching the corresponding keys from true to false in the code. At this point you can control the animation with a Run JavaScript action and one line of code, like

window.myAnimation.play();

Here you can download a sample project showing some Bodymovin animations used inside PubCoder, looping or triggered by a button or as a result of the correct completion of a quiz:

bodymovin.pubcoder

Here’s the same project exported as an XPUB that you can read on your mobile devices using PubReader (download it from App Store or Google Play)

bodymovin.xpub

This is just an example of what you can do in PubCoder with a few (namely 13) lines of code. But we actually plan to add native Bodymovin support in future versions of PubCoder, so you will be able to just import your animation and control it using actions as you do with every other object.