Comments on: Animating a CSS Sprite With JavaScript

By: SoftwareForChildren

SoftwareForChildren — Wed, 24 Aug 2016 17:34:00 +0000

Thanks for the good information!

Here’s a similar tutorial (only about 15 lines of code), without jQuery:

http://sprite.slicker.me/tutorial/tutorial.htm

By: Moises Lagos

Moises Lagos — Mon, 26 Jan 2015 14:40:00 +0000

if the image is vertical as I do?

By: Tim Sweet

Tim Sweet — Fri, 30 Aug 2013 00:06:40 +0000

I made a little animation plugin animatinator

http://timothyswt.github.io/animatinator/#/home

By: DigitalDesperado

DigitalDesperado — Fri, 16 Aug 2013 20:50:08 +0000

….ok it is playing backwards. I eat my words sorry Robert. However I couldn’t get your fix to make it play forwards it just stopped working for me. I used this instead
curPx = curPx – frameWidth;

If nothing else it’s good to know how to make it play either backwards or forwards.

By: DigitalDesperado

DigitalDesperado — Fri, 16 Aug 2013 13:26:45 +0000

Thanks for that. Also it is not playing backwards as Robert suggests, I’m an animator and I’m using it to run an animated sequence and it plays forwards. You do not need to alter the code.

By: Robert

Robert — Tue, 19 Mar 2013 16:32:21 +0000

Thanks for the tip; one note: the animation is actually playing backwards. To play forwards you need a negative x coordinate, like so:

spriteElement.style.backgroundPosition = ‘-‘+ curPx + ‘px 0px';

By: juju

juju — Wed, 06 Feb 2013 12:20:34 +0000

good tutorial

By: Angeline

Angeline — Wed, 12 Sep 2012 04:17:27 +0000

Hmm… Didn’t work for me, did I miss something?

, yes?

By: Salman

Salman — Thu, 19 Jul 2012 18:38:43 +0000

thanks… very helpful for me…