8bitAnimator.js /

Filename Size Date modified Message
0 B
7.1 KB
4.5 KB


8bitAnimator.js is an ultra-small ultra-hackish javascript library with the solely porpouse of creating and displaying 8bit-like animations inside any div. Such animation is displayed using divs as "pixels" inside the div that will serve as screen.

It has several interesting features:

  • An animation can have unlimited number of color palettes.
  • Each animation frame can specify it`s own display time and color palette.
  • The animation can be showed in any div.

Creating and showing an animation is pretty simple; let`s see how 8bitAnimator.js represents animations.


Animations are defined as json objects. Each animation object is must contain:

  • dimention: A two dimentional array containing two integers, each one corresponding to the number of pixels in the screen (width and height). [size_x, siez_y]

  • pixSize: An integer that specifies how many real pixels each div-pixel is going to use in the browser.

  • repeat: A boolean value that specifies if the animation must loop or stop after being shown once.

  • palettes: An array of the palettes to be used within the animation. Each palette is nothing but an array of (a maximun of ten) css valid color codes or names.

  • frames: An array of frame objects. Each frame object must contain:

    • duration: An integer that specifies how much time (in millisecons) should the frame be displayed.
    • palette: An integer that represents the color palette`s index to use while drawing the frame.
    • frame: An array of integer arrays. Each array represents a pixel row in the frame. Each integer is the color index to use for the corresponding pixel according to the used palette.

You talk too much, gimme examples

Ok I know, this is an example of a very simple (it has just one single frame for the sake of simplicity) animation object defined in json:

    "frames": [
            "duration": 5000, 
            "palette": 0
    "dimention": [10, 10], 
    "pixSize": 20;
    "repeat": true,
    "palettes": [
            "white", "black"

Simple, isn't it?

Glorious API

Super easy! You can define your animation object inside a remote json file, a json string inside your code, or directly coding the object in your js code. 8bitAnimator.js has a simple function call for each case.

Using as example the next page:

<!DOCTYPE html>
    <script src="8bitanimator.js"></script>
    <div id="container">

You may call:

  • animator8.animateUrl(containerId, animationURL): In the case you've got a remote json animation saved file (why wouldn't you? :) you would call something like animator8.animateUrl("container", "url/To/Remote/Json/Object.json").
  • animator8.animateObject(containerId, animationObject): Use this is you defined you builded your animation as a javascript object instead of a json string.
  • animator8.animateObject(containerId, animateString): I'm not sure if anyone would use this, but in this case you need to pass an actual json string defining the animation.

Wanna see a live example? C'mere! (it's also included in the source)

Graphical editor

Along with the source (which is super small and ugly) there's a dead simple graphical editor. Performance is more than poor, and it lacks so many feature. But hey, it's graphical! Also, it supports saving and loading animations. Use it with chrome. Click here to see it live.

Use 8bitAnimator.js for your pleasure and profit. Feel free to cooperate in the development, too. I'm pretty open-minded.