This is a great way to implement the principles of meaningful transition and visual continuity mentioned in the Material Design doc. When Material Design was introduced I thought that was the most interesting aspect of it, I'm really glad to find an easy way to put it into practice.
By using position: fixed they bork themselves if the user scrolls during an animation. (Easily verified by scrolling while watching the demo.) This seems fixable (no pun intended) by not using position: fixed unless the start and end elements are themselves position: fixed (and possibly doing something clever if one is and the other isn't, such as capturing scroll events and updating the end-point coordinates).
It uses position: absolute for HTML elements, but there's a position: fixed SVG, because that's the only sane way (that I've found so far) for morphing HTML into SVG and vice versa. If there's a reproducible bug please file a GitHub issue and I'll look into it!
Good idea, thanks. In the meantime, I've successfully testing it in IE10+, Chrome (OS X and Android), Firefox, Safari 6+ and mobile Safari. Basically it should work in any browser that supports CSS transforms, though I haven't got round to adding vendor prefixing for the benefit of IE9.
Very cool, I could definitely see this being used to create some interesting games. Does it scale well when using a lot of elements? Can you get a bunch moving at once without too much performance hit?
Anyway, regardless of the above, looks awesome on your demo page.
Thanks! Very good question - I haven't used it with many elements in one go, so I don't have a ready answer - it needs to clone a bunch of nodes and call getComputedStyle a few times, so it's definitely not free, though I honestly don't know where it would become noticeably sluggish. The good news is that transitions are (usually) done with CSS animations, so there's no timer congestion, and nothing to block the main thread once the transition starts.
The easing functions on the demo page are from https://www.npmjs.com/package/eases - ramjet will take any easing function (it should accept a value between 0 and 1, and return similar). For convenience, ramjet.linear, ramjet.easeIn, ramjet.easeOut and ramjet.easeInOut are included, but for best results I'd recommend combining it with an external easing library like eases.
Spring physics might be a bit challenging, because it involves updating a physical model on a timer loop until the system reaches equilibrium, whereas an easing function crudely approximates a physical system with a very simple formula. Having said that, the rebound.js example page mentions 'pre-recording' the animation, so in theory it ought to be possible to use that as the basis of a timing function. Definitely an area worth investigating.
Probably not, depending on your definition of 'work' (overriding the existing animations, or combining them somehow?). I've yet to try it, would be interested to find out though!
That's very nice. Looks like browser support is a problem, though; there are special cases for IE 11, Safari, and Firefox. I thought we were past that.
I have an application for this - I need to swap two DOM elements and have it look good visually.
http://www.google.de/design/spec/animation/meaningful-transi...