Great work!
Show HN: Ramjet.js – Morph DOM elements into each other
11–20 of 37 posts
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#12By 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).
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#13By 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
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#14By 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.
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#15Awesome stuff. I would advise you to prominently display information about what all browsers it supports.
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#16By 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!
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#17This 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...
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#18Awesome 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.
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#19Very 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.
Re: Show HN: Ramjet.js – Morph DOM elements into each other
#20Does it also work if the source and target are already animated, e.g., using CSS?