{"id":275130,"date":"2018-08-21T06:58:08","date_gmt":"2018-08-21T13:58:08","guid":{"rendered":"http:\/\/css-tricks.com\/?p=275130"},"modified":"2018-08-29T07:00:58","modified_gmt":"2018-08-29T14:00:58","slug":"abeamer-a-frame-by-frame-animation-framework","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/abeamer-a-frame-by-frame-animation-framework\/","title":{"rendered":"ABeamer: a Frame-by-Frame Animation Framework"},"content":{"rendered":"

In a recent post<\/a>, Zach Saucier demonstrated the awesome things that the DOM allows us to do, thanks to the <canvas><\/code> element. Taking a snapshot of an element and manipulating it to create an exploding animation is pretty slick and a perfect example of how far complex animations have come in the last few years.<\/p>\n

ABeamer is a new animation ecosystem<\/a> that takes advantage of these new concepts. At the core of the ecosystem is the web browser animation library. But, it’s not just another animation engine.<\/em> ABeamer is designed to build frame-by-frame animations in the web browser and use a render server to generate a PNG file sequence, which can ultimately be used to create an animated GIF or imported into a video editor.<\/p>\n

<\/p>\n

First, a little about what ABeamer can do<\/h3>\n

A key feature is its ability to hook into remote sources. This allows us to build an animation by using the web browser and “beam” it to the cloud to be remotely rendered\u2014hence the name “ABeamer.”<\/p>\n

ABeamer doesn’t only distinguish itself from other animation frameworks by its capacity to render elements in a file sequence, but it also includes a rich and extensible toolset<\/a> that is still growing, avoiding the need to constantly rewrite common animations.<\/p>\n

ABeamer\u2019s frame-by-frame design allows it to create overlays without dropping frames. (Demo)<\/a><\/figcaption><\/figure>\n

The purpose isn’t to be another Velocity<\/a> or similar real-time web browser animation library, but to use the web technologies that have become mainstream and allow us to create pure animations, image overlays and video edits from the browser.<\/p>\n

I have plans to create an interface for ABeamer that acts as an animation editor. This will abstract the need to write code, making the technology accessible to folks at places like ad networks and e-commerce companies who might want to provide their customers a simple tool to build rich, animated content instead of static images for ad placements. It can create titles, filter effects, transitions, and ultimately build videos directly from image slideshows without having to install any software.<\/p>\n

In other words, taking advantage of all these effects and features will require no coding skills whatsoever, which opens this up to new use cases and a wider audience.<\/p>\n

\"\"
Create animated GIFs like this out of images. (Demo)<\/a><\/figcaption><\/figure>\n

But if JavaScript is used, what about security? ABeamer has two modes of server rendering: one for trusted environments such as company intranets that renders the HTML\/CSS\/JavaScript as it was built by sending the files; and another for untrusted environments such as cloud render servers that renders teleported stories by sending them by AJAX along with the assets. Teleportation sanitizes the content both on the client side and the server side. The JavaScript that is used during interpolation process is not allowed, nor is any plug-in that isn’t on an authorization list. ABeamer supports expressions, which are safe, teleportable, and in many cases, it can replace the need of JavaScript code.<\/p>\n

\"\"
Example of an advertisement made with ABeamer (Demo)<\/a><\/figcaption><\/figure>\n

The last key feature is decoupling. ABeamer doesn’t operate directly with the document DOM, but instead uses adapters as a middleman, allowing us to animate SVG, canvas, WebGL, or any other virtual element.<\/p>\n

\"\"
Several examples of the chart animations built into ABeamer. (Demo)<\/a><\/figcaption><\/figure>\n

Getting started with ABeamer<\/h3>\n

Now that we\u2019ve covered a lot of ground for what ABeamer is capable of doing, let\u2019s dive into what it takes to get up and running with it.<\/p>\n

Installation<\/h4>\n

The ABeamer animation library can be downloaded or cloned on GitHub<\/a>, but in order to generate animated GIFs, movies, or simplify the process of getting started, you\u2019ll want to install it with npm:<\/p>\n

# 1. install nodejs: https:\/\/www.nodejs.org\r\n\r\n# 2. install abeamer\r\n$ npm install -g abeamer\r\n\r\n# 2. learn how to configure puppeteer to use chrome instead of chromium\r\n$ abeamer check\r\n\r\n# 3. install a render server (requires chrome web browser) \r\n$ npm install -g puppeteer\r\n\r\n# 4. install imagemagick: https:\/\/www.imagemagick.org\r\n\r\n# 5. install ffmpeg: https:\/\/www.ffmpeg.org\/<\/code><\/pre>\n
Puppeteer<\/a> is installed separately, since other server renders are also supported, like PhantomJS<\/a>. Still, Puppeteer running on Chrome will produce the best results.<\/p>\n
Spinning up a new project<\/h4>\n
The best way to get started it’s to use the ABeamer CLI to create a new project:<\/p>\n
abeamer create my-project --width 640 --height 480<\/code><\/pre>\n
This will create a project with the following files:<\/p>\n