RubberHose 2 - BodyMovin

 
 

SVG Animation

That phase either means a whole lot or absolutely nothing to you. In short, your animation can play online, at a high framerate, with unlimited resolution and usually a much smaller file size than as a video file or gif. You don't have to push play and if you want to get deeper, you can actually add interactivity to the animation. It's really amazing. 

BodyMovin

Getting animation out of After Effects and into web code is a gross ugly mess. BodyMovin is a tool to export from AE and a player for the web. There are a few extra steps to getting started, but the process has never been more painless. 

Many thanks to Hernan Torrisi for making this tool available to the world and his willingness to integrate RubberHose. 


Installation

Download BodyMovin

Available at aescripts.com for the price that you name. Seriously, give the man some money.

Also available on GitHub if you're looking to tinker with some code.

Download ZXP Installer

BodyMovin is an extension. This means it's installation is a typically a bit trickier than installing a script like RubberHose. 

To reduce the complexity of installing extensions, the smart folks at aescripts.com built a really awesome Extension Installer that will make your life a lot easier to get up and running with BodyMovin. So download and install it. 

Install BodyMovin

  • Unzip BodyMovin
  • Navigate to build/extension/bodymovin.zxp
  • Open up ZXP Installer
  • Drag bodymovin.zxp into ZXP Installer
  • Close and reopen After Effects
  • Open the Window menu, find the Extension group and you should see BodyMovin

Export Settings

With BodyMovin open, there will be a list of all comps within a project. Select your desired comp and click the ⚙ to open the settings for this comp. Because RubberHose controllers are guide layers and are often hidden. Be sure to enable:

Split Animation
◎ Glyphs
◉ HIDDEN
◉ GUIDES
◎ Extra Comps
◎ Standalone
◎ Demo


Rendering

Upon opening BodyMovin, you'll see list of all the available comps in the project. There's a handy search box for narrowing down your selection if you have a big project.

Next to the each comp in the list is a white dot, that when selected will turn red. Specify a destination for the file to be saved. The default filename is data.json. This is fine for now.


Previewing

Double clicking one of these exported files wont play like it a quicktime or even viewed in a browser like an HTML file. Because of how the internet works and how BodyMovin is designed to work with it, files need to be run over a server in order to play right. Meaning, there is an extra step required In order to view the exported file on your desktop. 

Open up the Settings for the comp to be exported and enable ◉DEMO at the bottom of the list. This will export an additional data.html file along with data.json. Open the html file in a browser and you'll get a preview of your animation and how it should play online.

You won't actually need this html file for embedding the animation into your site, it's just to let you view it on the desktop.

 


Exporting the Player

Playing the code on a website requires the BodyMovin Player file. This file interprets the exported code and tells the browser how to draw everything. This file will change with each new version of BodyMovin, so be sure to export it from the version of BodyMovin that you exported your comp. 

Click Player, then Get Player. You'll be given a dialog to save bodymovin.js. Save this file for later.


Embedding

Now it's time to actually get the exported animation on your site. At this point you will have a BodyMovin Player file (bodymovin.js) and at least one BodyMovin Animation file (data.json if you didn't rename it). These are the two files you need to make things work. 

Upload bodymovin.js and data.json somewhere to your web server –remember the location since you'll need to update the path in each of the added code blocks. There are several examples of different ways to get BodyMovin working on your site in the github download. This is the ultra simple way that works for me.

 

Player

First, add the player to the <head> of your page. Be sure to update the src to the path of the bodymovin.js file. You only need one copy of this file, but you will need this line of code on any of the pages you plan to run a BodyMovin animation. 

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

Animation

Drop this code with in the body of your page. Under path: set the path of your own data.json file.

The <div> line tells the page where you want the animation. The <script> block below that tells the page to go get the animation file (data.json) and how you want to play it (it's a loop, it should autoplay).

 

 
<div style="width:100%;height:100%;" id="bodymovin"></div>

<script>
    var animData = {
        wrapper: document.getElementById('bodymovin'),
        animType: 'svg',
        loop: true,
        autoplay: true,
        path: '/js/data.json'

    };
    var anim = bodymovin.loadAnimation(animData);
    bodymovin.setSubframeRendering(true);
</script>
 

Multiple Animation Files

In order to play multiple animations on one page you will need to give them unique names. In this example the we see two id's called bodymovin. This is how the page attaches the animation file to the <div> element. 

<div id="bodymovin">
wrapper: document.getElementById('bodymovin'),

Adding a second animation requires duplicating this code block, giving a new id name and updating the path to the second animation file (monsterFace.json or something like that).

 
 

Squarespace tips

I use Squarespace for all this site to make my life easier, but doing custom stuff like this can be a couple extra steps if you aren't working with the raw html. Here are a few extra things I've found helpful for me. Tips are Squarespace specific, but might be helpful for other services.

 

File Hosting

Squarespace allows you to upload files, but makes it difficult to use things that aren't images or videos. I ran into this trouble on Squarespace and ended up dumping my player and json files up on github then linking to the raw data through RawGit. It's a total hack and probably bad practice, but it works. 😬

Player

Open the settings (⚙) for the desired page, then select the Advanced tab. This is <head> of the page where you will add the player code. 

Animation

Add an Embed block to your page. Click the </> icon to add the raw code instead of an embed URL. This is where you paste the animation code.


Supported Features

The important thing to remember is that BodyMovin is telling the browser what to draw and how to draw it. RubberHose 2 has introduced a lot of new ways to work, but sadly, the browser does not support all of them. The web can draw a lot of things, but not as much as After Effects can. 

Styles are supported, but not all the Shape Layer modifiers are supported by the browser. The big one is Merge Paths and Offset Paths. This means Tapered Hoses are not supported. Stick to basic hoses to be safe and try additional features as you feel daring. 

Supported

  • Shape Layers:
    • Fills (standard and gradient)
    • Strokes (standard and gradient)
    • Round Corners
    • Trim Paths
    • Dashed strokes
  • Blending Modes (on layers)
  • Spatial Interpolation (motion paths)

Unsupported :(

  • Shape Layers:
    • Merge Paths
    • Offset Paths
    • Repeater
    • Pucker/Bloat
    • Wiggle Paths
    • Twirl
    • Blending Modes (on fill/stroke/groups)
  • PuppetPins
  • Effects

Additional Tutorials/References