Performance between MorphSVG and animating "d" attribute

[green_machine]

Just curious if there is any performance differences in a scenario where you're animating a path's "d" attribute from one value to another (both beginning and end values use the same amount of points) using the MorphSVG plugin vs. using the Attr plugin to animate the "d" attribute directly. I've done it both ways but never knew if one was more performant that the other in cases where the number of points are the same. Thanks.

[GreenSock]

Good question. I doubt you'd ever really notice a real-world difference. Technically-speaking, there's more up-front work that MorphSVGPlugin has to do because it converts the path into cubic beziers and figures out the best shapeIndex (maps which point in the start shape to which point in the end shape the sequence should begin). So you're technically taking a performance hit up front there, but on the other hand, the actual animation part is probably a bit more efficient in MorphSVGPlugin because of the way it can merge the values together into the final string is more efficient.

 

You could simply define shapeIndex:0 to have it skip the work of figuring it out automatically. You can also precompile (see the docs). 

 

The standard "complex string" tweening in AttrPlugin essentially busts the value apart into an array where any numbers that change get isolated, and then Array.join("") gets called to do the merging on each tick. When you get a lot of values in there, it's more challenging for browsers to do the join() because it's gotta convert numbers to strings and figure out where to chop the decimals, etc.

 

If I have to choose to get better performance on the first render or on every render thereafter, I'd typically choose the "every render thereafter", thus MorphSVGPlugin is likely a bit faster. Again, I doubt anyone will notice unless you're tweening some CRAZY complex shapes. 

 

Also, if you use MorphSVGPlugin, you get access to other features which might come in handy, like rotational morphs (type:"rotational") as well as different mapping algorithms. Here's a sneak-peak of a video we'll be releasing in the next few weeks (unlisted for now): 

 

I hope that helps!

[green_machine]

Cool, thanks for the explanation, Jack!

 

It seems like perhaps for very simple cases, it might be ok to forgo loading in the MorphSVG plugin and just using the Attr plugin to do it. The times I've done that have been pretty low-key uses, like changing a two-point straight line to a two-point curved line; but I didn't know if there was actually more work behind the scenes that the Attr plugin was having to do for stuff like that. 

 

Love the MorphSVG plugin and use it for some complex stuff all the time, but didn't want to load it in for something very simple unless there was a good reason.

[GreenSock]

Yeah, totally - I think it's entirely legit to do what you described especially for simple stuff when you know the quantity of points matches. No need to load MorphSVGPlugin if you don't really need the features. And like I said, I can't imagine you'd ever notice a performance difference for simple stuff anyway. 

 

Happy tweening!