
Show HN: Ramjet.js – Morph DOM elements into each other - rich_harris
http://www.rich-harris.co.uk/ramjet/
======
clement75009
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.

[http://www.google.de/design/spec/animation/meaningful-
transi...](http://www.google.de/design/spec/animation/meaningful-
transitions.html)

~~~
gidan
for an unknown reason videos in your link aren't working for me,
[http://www.google.com/design/spec/animation/meaningful-
trans...](http://www.google.com/design/spec/animation/meaningful-
transitions.html) is fine.

~~~
lolptdr
still doesnt work in Chrome, but it works in Safari... how funny

------
artursapek
Reminds me of "tweening" in Flash. Ah, the good old days...

~~~
fny
Amen. Had so many fun evenings with Flash as a kid...

------
Tloewald
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).

~~~
gtCameron
What browser are you using? I can scroll during animation in Firefox and
Chrome on my Mac without any adverse effects to the animation

~~~
Tloewald
I was using chrome on the Mac and easily got aberrations.

I can see issues with morphing to/from svg in mobile safari but it's actually
barely noticeable even when torturing the heck out of it.

So really it's very good — just nitpicking.

~~~
rich_harris
Are the aberrations related to transitions into or out of the SVG element (the
purple box)? If so, I've just added an issue for that:
[https://github.com/Rich-Harris/ramjet/issues/6](https://github.com/Rich-
Harris/ramjet/issues/6)

~~~
Tloewald
Exactly — not a big deal, but worth fixing I think.

------
jigneshhk
Awesome stuff. I would advise you to prominently display information about
what all browsers it supports.

~~~
rich_harris
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.

------
arxpoetica
Awesome. Same guy behind this library:
[http://www.ractivejs.org/](http://www.ractivejs.org/)

------
smhenderson
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.

~~~
rich_harris
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.

~~~
smhenderson
Cool, really looks good and I'm excited to play with it when I get some down
time.

Nice work!

------
moron4hire
For such a simple effect, it works really well. Did you write your own easing
functions, or did you use one of the libraries like Tween.js?

~~~
rich_harris
The easing functions on the demo page are from
[https://www.npmjs.com/package/eases](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.

~~~
fredliu
So does it mean it can be used with things like Rebound.js
([http://facebook.github.io/rebound-
js/examples/](http://facebook.github.io/rebound-js/examples/)) to provide
spring like animation?

~~~
rich_harris
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.

------
amelius
Does it also work if the source and target are already animated, e.g., using
CSS?

~~~
rich_harris
_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!

------
kveykva
I've been looking for something like this. Awesome, great work.

------
h_o
Just, thank you!

I have been trying to develop my own solution like this via jquery and it's
just awful. Thanks a million!! You da man

------
josephpmay
This is awesome. I will definitely be using this in a project this weekend.

------
untilHellbanned
Nothing to add other than...fantastic! I have to think of ways to use this!

------
detaro
Very cool effect and looks very smooth and "believeable"

------
Animats
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.

------
intruder
This looks amazing. Great work.

------
alinseba
Great stuff! Thanks for this!

------
greenpizza13
Great work!

