Snap SVG Iterate over Object to build Animate properties

Question

I'm looking to write a function involving Snap SVG that would allow me to pass in an object or array of values through which I can iterate to build the animation properties.

For example, if I could pass: [transform: 't100,100', transform: 'r10,10,10']

Into this:

animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing) {
        var s = Snap.select("#"+ parentSVG),
            theElement = s.select("#"+ element);

        theElement.animate({
           // Iterate over Object.keys(animationValues)
           transform: 't100,100',
           transform: 'r10,10,10'
        }, duration, easing);
    }

Answer 1

You don't need to iterate over an array of properties. You can actually create the animationValues as an object.

Given you set up your values like this:

var animationValues = {
    transform: 't100,100',
    transform: 'r10,10,10'
};

Then you can change your animate call like this:

animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing) {
    var s = Snap.select("#"+ parentSVG),
        theElement = s.select("#"+ element);

    theElement.animate(animationValues, duration, easing);
};