21–30 of 37 posts
Does it also work if the source and target are already animated, e.g., using CSS?
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
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.
Earlier quoted context omitted.
What browser are you using? I can scroll during animation in Firefox and Chrome on my Mac without any adverse effects to the animation
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.
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...
Earlier quoted context omitted.
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
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.
Earlier quoted context omitted.
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?
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…
Nice work!
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...