Loop animation with velocity.js

Question

Я пытаюсь сделать такую ​​анимацию цикла с помощью velocity.js: перевести объект по оси X от 0 до 473, затем от 0 до 473 и так далее.

Мне удалось сделать это вот так (код ниже), но в браузерах Chrome Chrome и iOS Chrome цикл начинается с некоторой задержки (лаг). Может кто-нибудь помочь?

function start() { 
    $(".el").velocity(
    { 
     translateX: [ -473, 0 ] 
    }, 
    { 
     duration: 8000, 
     delay: 0, 
     easing: "linear", 
     complete: reset 
    }); 
} 
function reset() { 
    $(".el").css("transform", "translate(0px, 0px)"); 
    start(); 
} 
start(); 

Answer 1

Поскольку вы используете принудительное кормление, то .css() вызов является излишним.

Удаление этой строки удаляет начальное отставание на Chrome для Android:

$el = $(".el"); 
function start() { 
    $el.velocity(
    { 
     translateX: [ -473, 0 ] 
    }, 
    { 
     duration: 8000, 
     delay: 0, 
     easing: "linear", 
     complete: start 
    }); 
} 

start(); 

И вы можете увидеть живую версию here.