5 ms·

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

309 points by rich_harris 11y ago

jigneshhk 11y ago
Awesome stuff. I would advise you to prominently display information about what all browsers it supports.
- rich_harris 11y ago
  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.
moron4hire 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      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.
untilHellbanned 11y ago
Nothing to add other than...fantastic! I have to think of ways to use this!
detaro 11y ago
Very cool effect and looks very smooth and "believeable"
artursapek 11y ago
Reminds me of "tweening" in Flash. Ah, the good old days...
- fny 11y ago
  Amen. Had so many fun evenings with Flash as a kid...
josephpmay 11y ago
This is awesome. I will definitely be using this in a project this weekend.
smhenderson 11y ago
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 11y ago
  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 11y ago
    Cool, really looks good and I'm excited to play with it when I get some down time. Nice work!
intruder 11y ago
This looks amazing. Great work.
kveykva 11y ago
I've been looking for something like this. Awesome, great work.
greenpizza13 11y ago
Great work!
Tloewald 11y ago
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 11y ago
  What browser are you using? I can scroll during animation in Firefox and Chrome on my Mac without any adverse effects to the animation
  - clement75009 11y ago
    Works fine for me too.
  - Tloewald 11y ago
    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 11y ago
      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 11y ago
        Exactly — not a big deal, but worth fixing I think.
- rich_harris 11y ago
  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!
clement75009 11y ago
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-transitions.html http://www.google.de/design/spec/animation/meaningful-transi...
- themodelplumber 11y ago
  Material Design? Man, I'm just excited to make one of those buttons you can't click on!
- gidan 11y ago
  for an unknown reason videos in your link aren't working for me, http://www.google.com/design/spec/animation/meaningful-transitions.html http://www.google.com/design/spec/animation/meaningful-trans... is fine.
  - lolptdr 11y ago
    still doesnt work in Chrome, but it works in Safari... how funny
- chinchang 11y ago
  Well said. Reading about visual continuity I attempted something recently -> http://kushagragour.in/lab/ctajs http://kushagragour.in/lab/ctajs
amelius 11y ago
Does it also work if the source and target are already animated, e.g., using CSS?
- rich_harris 11y ago
  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!
arxpoetica 11y ago
Awesome. Same guy behind this library: http://www.ractivejs.org/ http://www.ractivejs.org/
Animats 11y ago
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.
deleted 11y ago
[deleted]
alinseba 11y ago
Great stuff! Thanks for this!
h_o 11y ago
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

309 points by rich_harris 11y ago

jigneshhk 11y ago

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

rich_harris 11y ago
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.

moron4hire 11y ago

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 11y ago
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 11y ago
  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 11y ago
    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.

untilHellbanned 11y ago

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

detaro 11y ago

Very cool effect and looks very smooth and "believeable"

artursapek 11y ago

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

fny 11y ago
Amen. Had so many fun evenings with Flash as a kid...

josephpmay 11y ago

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

smhenderson 11y ago

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 11y ago
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 11y ago
  Cool, really looks good and I'm excited to play with it when I get some down time. Nice work!

intruder 11y ago

This looks amazing. Great work.

kveykva 11y ago

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

greenpizza13 11y ago

Great work!

Tloewald 11y ago

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 11y ago
What browser are you using? I can scroll during animation in Firefox and Chrome on my Mac without any adverse effects to the animation
- clement75009 11y ago
  Works fine for me too.
- Tloewald 11y ago
  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 11y ago
    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 11y ago
      Exactly — not a big deal, but worth fixing I think.
rich_harris 11y ago
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!

clement75009 11y ago

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-transitions.html http://www.google.de/design/spec/animation/meaningful-transi...

themodelplumber 11y ago
Material Design? Man, I'm just excited to make one of those buttons you can't click on!
gidan 11y ago
for an unknown reason videos in your link aren't working for me, http://www.google.com/design/spec/animation/meaningful-transitions.html http://www.google.com/design/spec/animation/meaningful-trans... is fine.
- lolptdr 11y ago
  still doesnt work in Chrome, but it works in Safari... how funny
chinchang 11y ago
Well said. Reading about visual continuity I attempted something recently -> http://kushagragour.in/lab/ctajs http://kushagragour.in/lab/ctajs

amelius 11y ago

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

rich_harris 11y ago
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!

arxpoetica 11y ago

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

Animats 11y ago

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.

deleted 11y ago

[deleted]

alinseba 11y ago

Great stuff! Thanks for this!

h_o 11y ago

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