Show HN: Ramjet.js – Morph DOM elements into each other | Hacker News Reader

Show HN: Ramjet.js – Morph DOM elements into each other

rich-harris.co.uk

309 pointsrich_harris35 comments

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

Material Design? Man, I'm just excited to make one of those buttons you can't click on!

for an unknown reason videos in your link aren't working for me, http://www.google.com/design/spec/animation/meaningful-trans... is fine.

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

Well said. Reading about visual continuity I attempted something recently -> http://kushagragour.in/lab/ctajs

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

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

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

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

Works fine for me too.

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.

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

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

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!

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

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.

Awesome. Same guy behind this library: http://www.ractivejs.org/

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.

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

Nice work!

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?

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.

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

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.

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

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!

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

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

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

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

Very cool effect and looks very smooth and "believeable"

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.

This looks amazing. Great work.

Great stuff! Thanks for this!

Great work!

Reply on news.ycombinator.com