SVG animation in browser

Question

I have a bunch of svg circles in a group.

I would like them to move to the left a little bit 30 times a second to create a scrolling effect.

I am using requestAnimationFrame at an interval of 1/30 of a second, and I apply

setAttribute('transform', 'translate(-' + offsetPx + ', 0)')

In the chrome timeline debugging tools it shows that setting this transform attribute causes the layout to be recalculated, which is quite expensive. According to this article: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ I did not think that was supposed to happen.

What is the most efficient way for me to achieve this scrolling effect?

Thanks in advance.

Answer 1

If you don't need to use requestAnimationFrame you can use the SVG animate tag.

<circle cx="50" cy="50" r="10">
    <animate attributeName="cx" from="50" to="0" dur="2" repeatCount="indefinite" />
</circle>

More info here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate.

Answer 2

look i have searched about this long time ago , in my opinion if you are gonna target mobile device , dont worry about this issue , however i want you to test this plugin :

http://www.greensock.com/js/speed.html

because many stastics out there are not correct.