Looping animation with speedjs
I am trying to make a loop animation like this with velocity.js: translate an object along the X axis from 0 to 473, then 0 to 473, etc.
I was able to do it (code below), but in Chrome and iOS Chrome browsers the loop starts with some delay (lag). Can anyone 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();
+3
source to share
1 answer
Because you are using forced power, the call .css()
is redundant.
Removing this line removes the initial lag in 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 the live version here .
+1
source to share