Search code examples
csshtmlsvgsvg-animate

SVG animation in browser

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.

Solution

  • 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.