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.

score 2 · Accepted Answer · answered Dec 02 '13 at 02:17

2

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.

answered Dec 02 '13 at 02:17

Minifyre

510
2
5
17

The problem is I do no know how much I need to move with each iteration. Can I apply 1 animation, wait for it to finish and then apply another? – rustybeanstalk Dec 02 '13 at 02:20
1

if you are talking about a simple tween just use translate , and trust me it is not a processor killer. – ProllyGeek Dec 02 '13 at 02:37
Okay, then SVG might not be the best, but I guess you could edit the animation tag's attributes on a timer (so yes you could wait for it to finish & then apply another). I believe SVG animation is less taxing on the CPU. – Minifyre Dec 02 '13 at 02:40

score 1 · Answer 2 · answered Dec 02 '13 at 02:18

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.

SVG animation in browser

2 Answers2