joelambert / morf Goto Github PK

via @madrobby (https://twitter.com/#!/thomasfuchs/status/97955171006550018)

The convention with real transitions is to fire a webkitTransitionEnd event for each property that is transitioned. Should Morf.js do the same? Currently it fires one event to say its finished.

https://github.com/joelambert/morf/blob/master/js/src/morf.js#L42

via @madrobby (https://twitter.com/#!/thomasfuchs/status/97955171006550018)

When running the example script, I get the following error in the console in Chrome:

Uncaught TypeError: Cannot set property 'webkitTransitionTimingFunction' of undefined

morf.js line: 171

Given the dependencies added in #9, I think it's worth creating a more modular build system for Morf. Grunt is the community leader here, and it is fairly easy to use. I'm filing this issue as a formal feature request for tracking purposes.

I'd be happy to build this in when I have some time, as I've already added similar infrastructure to Shifty itself. I'll send along a Pull Request when I can.

/cc @jfsiii

This is always important but especially so if we are testing cross-platform/cross-browser.

At a minimum we can do some unit tests on matrix values and keyframe values. I'll have to think more on how to test if the library "works" (correct keyframe syntax, correct timing function, etc)

Click "easeFrom" and "easeFromTo" here : http://www.joelambert.co.uk/morf/

Check the JavaScript console, there are errors for "Invalid matrix string." Not sure what's causing this. My initial theory is that there is that the "e" values (meaning it's a really big number) in the CSS string are breaking the syntax, but I have not tested that.

Thoughts?

Right now, Morf only supports a handful of CSS properties. This is actually due to a Shifty/Mifty config issue, I think. I'm looking into this and will hopefully have a pull request soon.

The callback is not call when the animation is finished but when it starts. Any solution ?

It seems that all of the modern browsers now support matrix transforms: https://developer.mozilla.org/en/CSS/transform

Looks like support can be added for all browsers.