A. Tan A. Tan - 4 months ago 7
Javascript Question

Animating SVG across the screen continuously

I am trying to animated an SVG object to go across the screen continuously like this:

http://jsfiddle.net/PPVda/

However I couldn't get it to work. My guess is because SVG doesn't work with CSS .animate.

So I tried to use velocity.js instead.

I have manage to re-position my svg using:

$.Velocity.hook($("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d")[0], "translateX", "-300px")
;

And translating it using:

$("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d").velocity({
translateX: 4000,
}, 9000);


To make it a continuously, I used this:

setTimeout(test(), 9000)


However, it doesn't run continuously.

Any help would be great! Thank you.

Answer

Try this instead:

$("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d").velocity({
  translateX: [4000, -600],
},{
  duration: 9000,
  easing: "lnear",
 delay: 0
});

https://davidwalsh.name/svg-animation

I don't recommend using callbacks for looping with SVG's

Comments