Ordering of transform properties is not preserved

[parinck]

I want
rotateX(abc) rotateY(cde) and then translateZ(asdf)

but sometimes

I get rotateX(abc) translateZ(asdf) and then rotateY(cde)

because of that I am unable to achieve desired effect.

[nikola]

There is no actual order in the example that you gave. The data structure

{
    prop1: val1,
    prop2: val2,
    prop3: val3
}

is not an ordered map. The JS language itself does not know the concept of ordered maps. There is no guarantee that the JS interpreter your browser client uses would interpret the property map in the order that you wrote.

To implement actual order in velocity property maps, @julianshapiro would have to rewrite or extend the notation of property maps. Meanwhile, you can try and modify your example like so:

$models.velocity({
    rotateX: "-90deg",
    rotateY: updateAngle + "deg",
}, {
    duration: 0,
    complete: function () {
        $models.velocity({translateZ: prevZoom + "px"}, 0);
    }
});

[parinck]

@nikola your hook worked.Thank you.

But still we need ordering because there are cases where you will have to animate multiple properties (more than 3 will produce garbage code when written in manner of @nikola's solution ).

Also ,

css3 transform operations are dependent on ordering.

Hence it would be great if ordering is available.

[julianshapiro]

@nikola is entirely correct in his response. Thank you very much.

@parin2092: Think about what what happens when you do this:

$el.velocity({ rotateX: 45, translateX: 500 });

$el.velocity({ translateX: 0 }); // Now there's only translateX left in the transform string.

Now, how would you indicate to Velocity that you want to perform a translation again, but this time before the rotateX which still exists in the transform string?

$el.velocity({ rotateX: 45, translateX: 250 });

As per above, perhaps you could repeat the current rotateX value just for the purpose of telling Velocity that you want it to be positioned before the new translateX animation. But, no matter what, your transform values from the previous transform animation will screw with the order of the incoming values. Because of this, there's not much of an incentive for me to implement this feature.

@parin2092: When you say "sometimes" it gives you image B, what are the conditions of that "sometimes"? Have you already performed a transform animation when that happens (as per my example above)? Or, is it just that you're using a different browser?

[parinck]

@julianshapiro : Sometimes refers to some erratic behavior due to browser rendering ( I'm using google chrome version 36.0.1985.125).
when I was developing my website , 95% of the times it used to work fine but for the remaining 5% it had some erratic behavior due to ordering of transform operations, I don't know what can be the root cause but when I debugged I found transform properties are not applied in "order".

You are right about your explanation.
Thank you for clearing my thoughts on how velocity and css3 operations works.

may be we'll have to come up with some other solution.

[julianshapiro]

I'm not currently sure how to solve this. Will close this for now and try to resolve this if more people bring it up.

Thank you so much for bringing this to my attention and helping me understand the issue, @parin2092. Much appreciated.

[samuelhorwitz]

I implemented a solution for this. Basically, there is an options argument which is by default an empty array. It can be filled with an ordered list of transform properties. It will sort the transformCache before applying it. 643cd0b. I'm sorry about the whitespace changes commits, didn't think before adding those to my local repo.

[julianshapiro]

Interesting......................... You should clear the whitespace change commits and open a new GH issue with your changes and a copy of the description you just wrote. I really like this.

[samuelhorwitz]

Yeah I just updated it, check 643cd0b