Velocity.js的步进功能？

Question

I recently switched from jQuery animations to velocity.js animations to improve performance. Switching was wasy because the syntax is largery the same. However, using jQuery's step -function doesn't seem to work with it:

$(".elem").velocity({
    height:100
},{
    step:function(now,fx){
        if(wasScrolledDown) $("body").scrollDown();
    }
});

Is there something similar in velocity.js that I could use to run a function on every frame ?

I have a chat application and when I animate elements' heights, I need the chat to remain scrolled down. With jQuery animations my solution was to run .scrollDown() on every frame. .scrollDown() is my own extension which simply scrolls to the end of the selected element(s).

Answer 1

Velocity has a progress option which is equivalent to jQuery step. Here is how the syntax looks like:

$element.velocity({
    opacity: 0,
    tween: 1000 // Optional
}, {
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

From the doc : [Option: Progress] Pass the progress option a callback function to be repeatedly triggered througout the duration of an animation. The callback function is passed data on the status of the call. This data can be leveraged for custom tweening and more.

Here is a demo that may be useful. Hope that helps.