Two weeks ago it finally seemed like I hit a milestone when I exported this animation from After Effects

Not only did the export process worked fine but also both the canvas and svg versions were performing considerably well on every major browser in desktop.

I wasn't expecting such good performance. Originally I had decided to do the animation sequentially but I finally decided to leave it like this since it seemed to work. I didn't target mobile devices in this case because of the degree of complexity the animation had.

This project started as an experiment looking for answers. I didn't understand why a good browser or desktop animation tool didn't come up to replace Flash. Lack of interest? canvas wasn't ready? svg wasn't ready? Why wasn't Adobe offering a great animation tool as Flash, or even better, After Effects, to export to the new technologies? Now, I can cross some questions from the list, but for some others I'm going to need need more time and help.

So, now, the journey so far.

TL;DR: this is an After Effects plugin that exports animations to json data. It is complemented with a js library that plays the animations on the browser, rendered to canvas or svg.
You can get both the plugin and the player and learn how to use them over here:
bodymovin

under the hood

First of all: the plugin exports keyframes for everything it supports. It is not a frame by frame export.
This is great for filesize and for subframe rendering.
Second: the plugin exports the animations as json data. So theoretically, you could create your own custom player instead of using the one on the library. I think coming up with a standard animation format would be great. Apparently SMIL is getting deprecated, and as far as I know, the new web animation API doesn't address an animation format. Since I was targetting minimum filesize, all properties are only one or two letter codes. If someone is interested, I could document what is every property on the json data.

What it supports right now:
-shapes (free shapes, rectangles and ellipses)
*fills
*strokes
*trim paths
*dashed lines
*colors
-images (any kind of image layer but not sequences or videos)
-null objects -solids
-precomps
-translation, rotation, scale, opacity, anchor points
-time remapping
-normal masks (and inverted masks only in svg renderer)

the villains

The steppenwolf: If you don't pool your elements, if you modify strings, if you add properties to objects, if you return objects from functions, if you push items on an array, you're stepping into the wild. Don't try to tame him. He doesn't care about reason. He's an absolute. Just stay away. The garbage collector.
Right now GC is the biggest issue to solve. I've had some success reducing it but there's still a lot to do. Chrome dev tools fall somewhat short. It's difficult to single out GC calls easily so I'm trying to parse the exported data and analyze it. Any advice on this would be very much appreciated. I'm having nightmares about him.
The devourer: He feeds on time. You can hear every millisecond cracking under his jaw. When you interpolate, when you trim, when you use a matrix transformation, he's feasting. Have you seen Goya's painting, Saturn? That's him. He was before time, he became time and he absorbs time. Scripting.
Optimizing is how you deal with him. But don't forget that the GC is always waiting on every crack to get you. So sometimes you have to resignate some time not to lose much more in the long run.
Five: Five's name is not that scary. But that's Five's way. Five is not terror. Five is frustration. If you go this way, how does it perform? very well! Except for One. One wants the other way. One does not like getTotalLength. One does not like forEach. One can't stand context.restore(). The browsers.
To beat him you have to become Noone. Just keep all of them in peace. And to clarify, One is not always IE.

the beginnings or the whys

I come from Actionscript and Flash. As a starting developer it was a lot of fun. Doing interactive pieces of code that reacted to mouse movement and user input was amazing. Also, working with designers was understanding a new language. They taught me their processes. It took me a lot of time to realize where their focus was and why they didn't, thankfully, appreciate the same details that I did. They politely asked me to stop adding a shadow on everything.

We haven't replaced flash as an animation tool for the web yet. There are amazing javascript libraries, like GSAP and Snap.svg that help the developer on their work. But attempting to do a more complex animation, I can't image how much time it would take without a proper tool. Also, many animators, whether they code or not, feel much more comfortable with an UI. Looking for a browser based version of Flash or After Effects, the only decent one I've found is Animatron. It's far from ideal. It feels unresponsive both on the UI and on the exported animation (for any developer over there: don't use foreach and anonymous functions, it's killing your performance!). Probably with some refactor they'll get to a decent place.

So I started exploring the possibility of exporting animations from an existing tool. Being AE a better tool for animating than Flash, and since it had a Javascript based language to script, I started trying it out. I found many issues with the scripting tool and it doesn't seem to be created for a heavy exporting task but I'll talk about it some other time.

the near present

Two years ago, I moved to javascript. One year ago I started the plugin. I'm not a great js coder. Still learning a lot. So this last two years were catching up. Between my job and the plugin I'm doing a superfast course.
Recently I also started participating on some of codepen's rainbow weekends. It's a very similar feeling to those pieces of code I used to write in flash. Lots of fun. The resulting code is sometimes messy but it's a place where I care more about trial and error than being performant or tidy. I should though, because on the other hand, I use codepen to learn from other people's techniques and skills. But improvising is also a personal way of learning very interesting stuff.

the present

That milestone from two weeks ago now seems far away. After publishing that animation I had some big svg improvements. Partly thanks to the help of one of Codepen's users. I've also learnt about the Web Audio API (also thanks to another user), and I definitely want to see if I can integrate it with the plugin. I've also done some refactoring to reduce GC and am still working on it.
The AE plugin is exporting a little slow. I still need to read more of the language documentation. But also slowness is due to some hacks needed to get real values of some properties and not the ones reported by AE objects. If the AE people extend their APIs in the future, this hacks won't be needed at all. If this was the case, everything would run so so so much faster. But in the meantime, I don't think I will be able to improve it.

the future

learning how to use Markdown. Those lists are driving me crazy.
The AE plugin needs some love. It's pretty basic. If you have any suggestions about it, please let me know.
write another post on how to use the plugin step by step.
Refactoring. For some things, I need to improve the way they're currently coded. For others, I still need more benchmarking to decide which way to go. 3d, supporting basic effects and expressions. Requests?
Getting familiar with the web animation API. It's on it's way, but seems slower than expected. Integrating with other javascript tools. GSAP and CreateJS are on my list. When I get the courage, I'll write to them and ask for their assistance on this. Hopefully they'll help me on this, because it's a bumpy road and I really want to speed things up a little.
Finally, have fun. I really want to see what everybody does with it. And keep participating on rainbow weekends with all the great people that share their code, time and imagination.


14,185 4 43