Missing CSS transforms

[Pauan]

According to MDC (https://developer.mozilla.org/en-US/docs/CSS/transform) here are the CSS transforms that morpheus is currently missing:

scaleX, scaleY, skewX, skewY, translateX, translateY, matrix, matrix3d, translate3d, translateZ, scale3d, scaleZ, rotate3d, rotateX, rotateY, rotateZ, perspective

In addition, the two-argument syntax for "scale" is missing: scale(0, 1)

Looking at the regexp in the source, it also looks like the second argument for skew and translate isn't optional. And it seems the regexp only allows a single space after "," but that can be easily fixed by changing it to use * rather than ?

Lastly, skew and rotate should use angles (https://developer.mozilla.org/en-US/docs/CSS/angle) and translate should use lengths (https://developer.mozilla.org/en-US/docs/CSS/length)

I'll be honest: the only one that I care about right now is scaleY, but I figured I'd include them all for completeness. I wouldn't blame you at all if you decided to not include the more esoteric stuff.

[ded]

what a wonderful way to start the morning. i suppose it's best to get these in — it wouldn't be a complete animation library if we didn't.

[Pauan]

To reduce hardcoding and special cases, what I would do is change Morpheus so it accepts any CSS unit, and any CSS function. Then if you say this:

morpheus($("div").css({ transform: "bar(10qux)" }), {
  transform: "bar(+=50qux)"
})

It'll transition between "bar(10qux)" and "bar(60qux)". That way, it'll immediately work with all angles and lengths, and if a browser adds in new things, Morpheus will immediately work with it.

---

By the way... I have enough JavaScript knowledge that I could add this in myself. I'll start working on it and file a push request.

[rvagg]

Implement tests for what you want to do then hack away until it works. Submit a pull request at any time and we can give you feedback and guidance where required. Make sure you only edit the file in the src directory. (Unless @ded wants to rule this out up-front).

[Pauan]

Okay, I have this idea that I think will make all properties everywhere work, including all CSS transforms and color values like "black", "green", hsl, etc.

Basically, you first get the computed style of the element, you set its style to the new value, then you get the new style:

var old = foo.style.bar
getStyle(foo, "bar")
foo.style.bar = new
getStyle(foo, "bar")
foo.style.bar = old

getComputedStyle returns the used value (https://developer.mozilla.org/en-US/docs/CSS/used_value). This has some benefits: all lengths are pixels, all colors are rgb, all transforms use matrix, etc. That means that rather than trying to support all the different CSS values, you can just support a subset.

This also opens up the possibility of specifying a CSS class, like Bernie's Animator.js (http://berniesumption.com/software/animator/)

I'm working on that right now, but it'll require substantial changes to the source code, so it'll take a while.

Also, I don't know if the used values are the same in all browsers. In particular, I don't know if IE will do something different. And I don't have access to IE, so I'd appreciate it if anybody could run some tests to see what getComputedStyle and currentStyle return for colors/lengths/transforms in IE.

[ded]

yeah, given that this library currently works back to even IE6, getComputedStyle vs currentStyle will have very different behaviors. Especially when fetching a computing style of white will return white — and not #ffffff or rgb(255, 255, 255) and therefore have no way of transitioning without an actual color map (which i'm not going to support).

nevertheless, i like the idea of future-proofing the library allowing for arbitrary values and units. i say go for it.