Enhancement: Step animations through custom easings

Hi,

I wanted to animate a background image (sprite sheet) to replace a css3 animation. The current CSS equivalent is:

@keyframes play {
  from { background-position:    0px; }
  to { background-position: -600px; }
}

.loader {
    width: 20px;
    height: 20px;
    background-image: url("../img/loader.png");
    @include animation(play 1s steps(10) infinite);
}

My current implementation with velocity is:

window.setInterval(function() {
    $element.velocity({
        'background-position-x': ['-600px', '0px']
    }, {
        duration: 1000
    });
}, 1000);

But it animates the background position with a step that I can’t control. I would like to increment it by 20px each frame (the width of the loader), otherwhise it won’t work as expected.

Is this possible with velocity ? Maybe with the easing function ?

[ocombe]

Turns out the step function is really simple:

(function() {
    var Container = (window.jQuery || window.Zepto || window);

    if(!Container.Velocity || !Container.Velocity.Utilities) {
        console.log("Velocity UI Pack: Velocity must first be loaded. Aborting.");
        return;
    }

    Container.Velocity.Easings["steps"] = function(p, opts) {
        return Math.round(p*opts.steps)*(1/opts.steps);
    }
})();

[julianshapiro]

thanks, @ocombe! awesome use