Jon Stuebe

Sprite Animations

javascript animations

Sprite Animations

Posted by Jon Stuebe on .
Featured

javascript animations

Sprite Animations

Posted by Jon Stuebe on .

Recently, I worked on a project that needed to have various animations occuring that went beyond moving around a "layer". My normal go to is a jQuery plugin called spritely, so I dived into the project with that in mind. Quickly though the animations got decently complex. I needed to have the animation stop at a certain frame move in a certain way and then resume or even possibly change sprite images at different times.

Also, to makes things worse, I created a few test scenarios with five to six different animations occuring simultaneously and started seeing different edge case errors. I did some research and found that there are some ways to do sprite animations with pure css. I'll include a few examples so you can see for yourself:

.selector {
    animation: effect 450ms steps(15);
}

If you want to read more about this technique, check out this article. What I realized quickly though was that there wasn't a whole lot of control over the timing and I ended up having similar problems as when using spritely.

I ended up going back to javascript for my solution, but this time building something myself. I started by thinking of a couple of use cases that I needed in the project and building out the simplest ones first. From there I created a system that is event driven rather than method driven so the whole plugin can be used as an api rather than hoping that the one or two methods cover every use case.

This way, every complex animation could be done by use of event listeners and triggers which give you tons of different combinations to work with. I'm going to publish it and keep it open source so others can not only use it but hopefully improve it for their needs and others.

Github Link

bower install jquery.sprite
user

Jon Stuebe