A javascript little framework to animate spritesheet as AS3 movieclip



JS movieclip is a small javascript library to quickly and easily create, integrate, and control animations in an HTML page.

It is compatible with all browsers, from Internet Explorer 6 to latest smartphone (iOS, Android..).

JS MovieClip uses "sprite", that is to say a large image containing all the frames of to animation. Then, It will allow to play and control the animation with stop(), play(), gotoAndPlay() ... like any Flashers does.

V1 stable


First, you need a sprite, a big image containing each frame of your animation. You have 3 options :

The only requirement is that each frame need to have the same size!

To simply create it : in Flash or After Effects, export your animation in a PNG sequences, and join it in a sprite with photoshop, GIMP, TexturePacker...

Then, you need a DOM element, div or whatever you want :

<div id="my-element"></div>

After, you need to apply to it the width and the height of a frame and the sprite as background :

#my-element {
    width : 200px;
    height : 200px;
    background:url(sprite.png) no-repeat;

And now, instanciate a new JSMovieclip object :

var movieclip = new JSMovieclip(document.getElementById('my-element'), params);

First parameter can be a DOM element, an array of DOM elements, a jQuery (or Zepto..) object, a NodeList...

Second parameters are options, they can be :

    framerate : 25,
    stopCallback : fn,
    frames : [],
    direction : 'h' || 'v',
    frames_number : 0,
    width : 0,
    height : 0

So :

  • the framerate is the framerate of your animation, in Frame Per Second, the default is 25
  • In stopCallback you can pass a function it'll call each time the movieclip stops

For the sprite, you have several options, so,

  • if you have a horizontal sprite, you can simply specifie the direction : 'h' (horinzontal), the frames_number and the width of a frame
  • For a vertical sprite, set direction to 'v', the frames_number, and the height of a frame
  • If you have a custom sprite, just set the frames array with each frame : [{x:0, y:0}, {x:200, y:0}, {x:400, 0}, {x:0, y:200}, {x:200, y:200}, {x:400, y:200} ,....] (you can also use this parameter for a vertical or a horizontal sprite)


There are some public methods :

play the animation from the frame where you are, boolean ````loop````` to specifie if you want to loop or not

mc.play(loop : boolean); 

stop the animation (dispatch the stop callback)


play the animation from the frame frame, boolean loop to specifie if you want to loop or not

mc.gotoAndPlay(frame:int, loop:boolean); 

go and stop directly to a frame


block the animation between two specifics frames :

mc.loopBetween(frameStart:int, frameEnd:int);

all animation are now between frameStart and frameEnd animation

mc.loopBetween(1, 10).play(true); //play animation between first frame and 10's

If you call mc.loopBetween(); you can call clearLoopBetween to reset first and lastFrame to the default


get current frame


go back to a frame


go to the next frame


if play : stop, if stop : play, boolean loop to specifie if we want to loop or not


Change the way of playing :

mc.changeWay(1); // play in the normal way
mc.changeWay(-1); // invert the playing
mc.changeWay(-1, true); //the second param, a boolean to stay a the same frame

Get current way of playing, return 1 or -1


All method are chainable (except currentFrame() and getWay() ), so you can do :

mc.loopBetween(12, 14).gotoAndPlay(12)

V1 jQuery plugin version

Instance :


recover the movieclip object

var mc = $('#element').data('JSMovieclip'); 

You can now apply all the public method on mc object


Samples & Usefull links