CSS animation via JavaScript I call this animateElements function as part of an animation loop (inspired via Dave Gamache). Everything works as expected, but I would love to try and improve/optimize if possible.

var animation, translate, translateY, translateX, scale, rotate, opacity, display;
    animateElements = function() {
        //var animation, translateY, translateX, scale, rotate, opacity, display;

        //do{ //No performance improvement in chrome with neg-loop + ...havent tested others

        //var i = keyframesConverted[currentKeyframe].animations.length;
        //while(i--) {

        for (var i = 0; i &lt; keyframesConverted[currentKeyframe].animations.length; i++) {
            animation = keyframesConverted[currentKeyframe].animations[i];

            //NOT MUCH IN IT: this "if" vs ternary, but fps was better on ternary.

            display = (typeof animation['display'] === 'undefined') ? null : animation['display'][1] || null;

            if (display !== 'none') {
                translateY = (typeof animation['translateY'] === 'undefined') ? 0 : calcPropValue(animation, 'translateY', 2);
                translateX = (typeof animation['translateX'] === 'undefined') ? 0 : calcPropValue(animation, 'translateX', 2);
                scale = (typeof animation['scale'] === 'undefined') ? "" : " scale(" + calcPropValue(animation, 'scale', 2) + ")";
                rotate = (typeof animation['rotate'] === 'undefined') ? "" : " rotateX(" + calcPropValue(animation, 'rotate', 1) + "deg)";
                opacity = (typeof animation['opacity'] === 'undefined') ? 1 : calcPropValue(animation, 'opacity', 2);

                translate = 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0.01px)';

                $(animation.selector).css({
                    'transform': translate + scale + rotate,
                    'opacity': opacity,
                    'display': display //= (opacity &lt; 0) ? 'none' : display//Todo: Potential for performance Improvement but would require major recode?
                });
            } else {
                $(animation.selector).css({ 'display': 'none' });
            }
        }//while(i--)
    }


    calcPropValue = function (animation, property, deciPlaces) {
        var value = animation[property];
        return (tweenEase(relativeScrollTop, value[0], (value[1] - value[0]), keyframesConverted[currentKeyframe].duration, (typeof animation['tween'] === 'undefined') ? null : animation['tween'][1] || null)).toFixed(deciPlaces);
    }


Concerns:


The use of typeof animation[...] as most likely the ternary will reference it twice a loop, for each animation property; hence, should I place it in a var?
When calling calcPropValue(), would there be a performance gain by just passing animation['...type'] in one go, rather than the 'animation' and then its 'type'?
As this function has no further use - except from where it is called - would it be an improvement just to move this function block into that animation loop directly, as I assume 'fewer calls to functions, the better'?
Your priority is to reduce dependency on expensive strings  :


Change all associative syntax, animation['x'] >>> dot notation, animation.x .
Change 'undefined' >>> undefined.
Avoid passing/returning strings to/from functions. They are passed by value (a function uses its own copy).
Pass back a number from calcPropValue() and do the toFixed() back in the caller statement.


Also :


The tween setting is the same for every call in the same turn of the for loop, therefore calculate it once and pass to calcPropValue().
Simplify testing of tween and display values.


Inside the for loop, assign :

display = (animation.display &amp;&amp; animation.display[1]) || null;
tween = (animation.tween &amp;&amp; animation.tween[1]) || null;


Don't forget to add tween to the var declaration.

Modify calcPropValue() as follows :

calcPropValue = function (value, tween) {
    return tweenEase(relativeScrollTop, value[0], (value[1] - value[0]), keyframesConverted[currentKeyframe].duration, tween);
}


Ternery's will become, eg : 

translateX = animation.translateX ? calcPropValue(animation.translateX, tween).toFixed(2) : '0.00';


Then consider sacrificing readability for performance by not assigning what the terneries return. Instead write them directly into the expressions where the resultant strings get used, eg :

'transform': 'translate3d(' + 
    (animation.translateX ? calcPropValue(animation.translateX, tween).toFixed(2) : '0.00') + 'px, ' + 
    (animation.translateY ? calcPropValue(animation.translateY, tween).toFixed(2) : '0.00') + 'px, 0.01px)' +
    (animation.scale ? ' scale(' + calcPropValue(animation.scale, tween).toFixed(2) + ')' : '') +
    (animation.rotate ? ' rotateX(' + calcPropValue(animation.rotate, tween).toFixed(1) + "deg)" : ''),


When you're done, pass the code through jslint or jshint to help spot any bloomers.