使用Velocity JS更改颜色动画的div尺寸

Question

我有一个使用Velocity JS的具有循环动画颜色背景的div，如下所示：

$(function() {
    $("div#container").velocity({backgroundPositionY: ['78%','50%','23%']},{duration: 10000,loop: true});
});

我想在滚动页面时缩小div，但是

$(document).on("scroll", function(){
    $("div#container").velocity({
        height: "270px",
        padding: "20px 0 0 0",
    }, {
        duration: 3000, 
        easing: "linear"
    });    
});

没有任何作用。我猜是因为Velocity在忙于动画循环。

我可以在jQuery中做到这一点...

$(document).on("scroll", function(){
    $("div#container").animate({
        height: "270px",
        padding: "20px 0 0 0",
  }, 500, function() {
  });
})

是否可以完全用Velocity做到这一点？

这是一支笔。我注意到它最终会缩小并且动画停止：https://codepen.io/anon/pen/xJaZKP