Jump to content


svg performance question -- tween svg element or children?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've a rather simple animation -- just bouncing some svg balls around.


I am wondering though if there is a performance win for one approach over another.


Is it better to have one svg element with many circles inside tweening OR better to have multiple svg elements and just move the svg element around?


Both are easy enough to build -- but before I do, I thought to come here to solicit some feedback.  Thanks!

See the Pen mEoQWw by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

Hello erikb,


If you want to take advantage of animating with 3D transforms or using the GPU to render, than your better off wrapping your svg tags with div tags. Since SVG 1.1 does not support CSS 3D transforms, only CSS 2D transforms.


So if it was me animating lots of SVG elements than i would wrap with div tags and animate the div tags. If it is just a simple SVG with not a whole lot of SVG parts, like over 30 or 50, than animating the individual SVG child elements is perfectly fine.


Like in this SVG bouncing ball, animating the children of a SVG element:


See the Pen EVXgGV by jonathan (@jonathan) on CodePen



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.