Define a surface and add an object.
<div id="surface">
<div id="surface-object"></div>
</div>
<script>
const surface = new FrictionDOM.Surface("surface");
const object = new FrictionDOM.SurfaceObject("surface-object", surface);
</script>
Receive touch-friendly interactive motion.
Demos
View the source code of each to learn how it was done.
-
Custom Properties
Motion can be applied to more than just position, height and width is changed in this demo.
-
Hello World
An introductory demo showing a interactable object within a boundary.
-
iOS Style Offcanvas
This is a flex of available callbacks and events to re-create some of the iOS mail experience.
-
Locked Axis
Axis can be locked to limit motion to a single direction.
-
Nested Objects
You can add an extra layer of elasticity by nesting objects and surfaces.
-
Nudge Thresholding
Set nudge thresholding to disallow objects to be hover in no mans land.
Some Thoughts
This is currently considered experimental. To be honest it will likely never move out of experimental status... only playing around with an idea. It's reached a point where I could now reach for this in some personal projects when I'd like to. Should I have needs that require further developement on it perhaps then I'll get it more stable and built out. Some remaining things I'd most likely have to work on next:
-
Input (or any other interactive element) handling within a
SurfaceObjectneeds to be supported. There is very basic "click" passthrough now to meet basic use cases but this would need to be a bit more robust for use cases like forms. -
Documentation... there is none. I added some typescript types at mostly the last minute thinking it would be a passable
form of documentation (mostly for myself to rememeber options and option types). It works for now, but to know how to use
this you'll have to look at the types for
SurfaceandSurfaceObject. -
Horizontal scroll support with
SurfactObjects. I added vertical support for the iOS demo because that is a common use as I'd see it, but this should also work horizontally (less likely, but no reason some features should only work Y axis and not X axis. -
Thresholding and
goto. Thresholding is a bit buggy currently... would want to fix that. In the same sense the code forgotojust "pushes" the object so it perfectly makes it to a boundary. This results in really slow movements that can be frustrating. Maybe this should be more spring oriented or something similar. Maybegotois customizable. Not sure, but it's not great behavior currently. - Will this be released on a package manager at some point? Maybe, if I dedicate some more time to doing the things mentioned above. Not likely.
- Probably other things I forgot about...