# animating a spritesheet using crafty.js

this is my jsfiddle : http://jsfiddle.net/seekpunk/ek6ub4u5/1/

i don't understand what i am missing it's been three days now working and trying to do the animation but i am stuck

 Crafty.sprite(128, "https://0.s3.envato.com/files/42440549/1_Ninja.jpg", {
idle: [1, 0]
});


i've loaded the spriteseet image and declare idle

 Crafty.c("animation", {
init: function () {
this.requires("SpriteAnimation");
this.animate("run", 1, 1, 4);
this.bind("enterframe", function () {
if (!this.isPlaying("run")) {
this.animate("run", 20);
}
});
}
});


then i have declared the animation component and the bindframe function

var player = Crafty.e("2D,Canvas,idle, animation")
.attr({ x: 0, y: ch - 128, w: 128, h: 128 });


then i've declared the player ,but sadly the animation is not working .. can anyone tell me what i am missing please

There are a few problems here. First, SpriteAnimation has changed. You now need to define an animation reel.

//this.animate("run", 1, 1, 4);
this.reel("run", 1000, 1, 1, 4);


Second, names in javascript and Crafty are case sensitive.

//this.bind("enterframe", function () {
this.bind("EnterFrame", function () {


Third, I fixed a few small problems with your jsfiddle so it will run. http://jsfiddle.net/hso6cmvp/