since Collide is not here yet and seems lacking real physics, I decided to make a proof of concept for modules to extend Ionic with Natural UI concepts.
DEMO: Codepen / mikkokam (Run in Chrome or a real mobile device.)
FULLSCREEN link to use on a phone or tablet: http://codepen.io/mikkokam/full/Geotz
Goals: enable drag, throw, or manipulate any DOM element using multi-touch with inertia or accelerometer data. Basic implementation should be declarative, using only attributes in HTML elements to enable them to do all this.
Abstraction for UI design:
Input: one or more touches, x and y. Optionally combined with accelerometer data.
Output: transform a DOM element by any combo of ‘translateX’, ‘translateY’, ‘translateZ’, ‘rotateX’,‘rotateY’,‘rotateZ’,‘scale’, ‘scaleX’,‘scaleY’. Can take multipliers and functions. This enables the user to drag an element in 3D-space.
Adding stops and limits helps create “states” for the elements: a 90 deg tilted card could reveal options underneath, or there might be some other snap for the 3D drag to guide the user.
Further: Watch for collisions; track elements and make them bounce.
Ideally trigger events to chain actions or cause reactions.
The proof-of-concept was quite rapidly created during some spare time last weekend.
This is a MVP, so the implementation is not pretty. (OK, it’s a hack).
I think this could enable nice interaction possibilities (not just triggered “spring” animations like everyone else is doing) - where the user can interact with the elements directly.