Snap SVG Animation Performance - performance

Question

The Problem:
I'm using Snap SVG to draw and subsequently animate 4 graphics (desktop, laptop, tablet, phone), so that they morph into one another every 5 seconds. The devices are built using basic lines and shapes, as well as a PNG screenshot for each device. You can see it in action here. My original code is as follows:
var makeDesktop = function() {
deviceOuter.animate({width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout);
screenOuter.animate({width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout);
screenImageDesktop.animate({width: 380, height: 220, transform: 'T0,0', opacity: 1}, 1000, mina.easeinout);
screenImageLaptop.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
screenImageTablet.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
screenImagePhone.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
camera.animate({r: 2.5, transform: 'T0,0'}, 1000, mina.easeinout);
desktopDivider.animate({d: "M0,260, 420,260", opacity: 1}, 1000, mina.easeinout);
laptopMidDivider.animate({d: "M20,300, 400,300", opacity: 0}, 1000, mina.easeinout);
laptopMidLeft.animate({d: "M20,300, 20,300", opacity: 0}, 1000, mina.easeinout);
laptopMidRight.animate({d: "M400,300, 400,300", opacity: 0}, 1000, mina.easeinout);
deviceBaseLeft.animate({d: "M165,300 Q160,340 140,340", opacity: 1}, 1000, mina.easeinout);
deviceBaseRight.animate({d: "M255,300 Q260,340 280,340", opacity: 1}, 1000, mina.easeinout);
deviceBaseBottom.animate({d: "M140,340, 280,340", opacity: 1}, 1000, mina.easeinout);
mobileButton.animate({r: 10, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
$("#btn-desktop").addClass("active");
devicePosition = 0;
};
I've also tried reformatting to make use of a set:
var makeDesktop = function() {
var set = Snap([deviceOuter, screenOuter, screenImageDesktop, screenImageLaptop, screenImageTablet, screenImagePhone, camera, desktopDivider, laptopMidDivider, laptopMidLeft, laptopMidRight, deviceBaseLeft, deviceBaseRight, deviceBaseBottom, mobileButton]);
set.animate([{width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 1}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout], [{width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout], [{r: 2.5, transform: 'T0,0'}, 1000, mina.easeinout], [{d: "M0,260, 420,260", opacity: 1}, 1000, mina.easeinout], [{d: "M20,300, 400,300", opacity: 0}, 1000, mina.easeinout], [{d: "M20,300, 20,300", opacity: 0}, 1000, mina.easeinout], [{d: "M400,300, 400,300", opacity: 0}, 1000, mina.easeinout], [{d: "M165,300 Q160,340 140,340", opacity: 1}, 1000, mina.easeinout], [{d: "M255,300 Q260,340 280,340", opacity: 1}, 1000, mina.easeinout], [{d: "M140,340, 280,340", opacity: 1}, 1000, mina.easeinout], [{r: 10, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout])
$("#btn-desktop").addClass("active");
devicePosition = 0;
};
My Question
Seeing as every animation's duration is 1000ms and has the same easing curve, is there a less expensive way of achieving the same effect? Is there any performance benefit from using a set in this instance, as it drastically reduces readability.

Answer 1

Its hard to guess without seeing a jsfiddle to play around with different options and separate it from the rest of the webpage. I'd first play around with it separately.
The advantage 'should' be, that you are only running one timer, instead of a timer for every element, which certainly can create an overhead.
With a lot of elements, this would have an effect, I think in your case, its borderline. It may perform a little better, but I'm not sure it would be noticeable. Only you can tell that. One thing I would say, is test them both on mobile, as that is often a lowest performing case for svg animation.
Other things that may be worth looking into...
Are there multiple transforms applied to an element (eg a transformed element inside a group or another container thats transformed), as that will slow things down.
CSS transforms/animations can often perform better, but you will want to check support for browsers/devices. Velocity.js could be worth looking at.
Does having a viewBox affect performance, could it be quicker if everything was initially the right size, what about the images ?
Regarding readability, everything doesn't have to be kept onto 2 lines in the alternative version, you can still make things readable I would think (if not more readable). Eg could it be rewritten like..
var deviceOuterChanges = [{width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout];
var screenOuterChanges = [{width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout];
....
var set = Snap([deviceOuter, screenOuter.... mobileButton])
.animate([ deviceOuterChanges,
screenOuterChanges,
...
]);
You could also reuse some of them, as all of the screenImage objects have the same animation attributes.