Loop animation with velocity.js

Question

I'm trying to do that kind of loop animation with velocity.js: translate object on X axis from 0 to 473, then from 0 to 473 and so on.

I've succeeded to do that like this (code below) but on Android Chrome and iOS Chrome browsers the loop starts over with some delay (lag). Can someone help?

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

Since you're using forcefeeding, the .css() call is redundant.

Removing that line removes the initial lag on Chrome for Android:

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

start();

And you can see a live version here.