A. Tan A. Tan - 1 year ago 60
Javascript Question

Animating SVG across the screen continuously

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


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:

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 Source

Try this instead:

  translateX: [4000, -600],
  duration: 9000,
  easing: "lnear",
 delay: 0


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