iamralpht / slalom Goto Github PK

Currently the overdrag coefficient is just a scalar multiplier (0.5 by default). Other platforms do something more interesting, like this: http://holko.pl/2014/07/06/inertia-bouncing-rubber-banding-uikit-dynamics/#rubber-banding

The overdrag doesn't have to be just a multiplier (it's not related to the linear solver) so Slalom should support fancy functions as well.

Hey,

Thanks for this great idea.
For a while I was thinking about a good way to simplify touch animations. I looked at famo.us, which has this nice concept of syncing inputs to variables, but it looks too immature and requires you to completely move away from the normal way of developing web apps.

Then I came across this idea and I really love it. However, I have some ideas to extend this, but before diving in, it seems a good idea to discuss them with you:

1. Allow other gestures than only drag.
   Currently the manipulator allows only to bind a variable to pan/drag gesture on an element. However, this could be abstracted away so you could sync zoom (pinch) and rotate to cassowary variables. This could look something like:

createManipulator(context variable, binded element,gesture,gesture options,multiplier)

Where gesture is: pan,pan-horizontal,pan-vertical,pinch,pinch-in,pinch-out,rotate,rotate-left,rotate-right
And gesture-options are hammerjs options like {'pointers':2} for two-finger panning
And multiplier multiplies the value that gets synced with the cassowary variable (eg. scale for pinch, angle for rotation, x and y for pan)

One issue is that this would require non-drag actions (eg. pinch and rotate) to also have a pinch/rotate velocity, which I believe is currently not present in Hammerjs. Solution would be to implement this in hammerjs (I'll have a look at this).

Another one is that manipulator might get bloated, it is now already responsible for quite a lot of stuff. Solution would be to abstract this away from the manipulator. So the manipulator just takes in a javascript variable that gets changed by some other object that is responsible for syncing with gestures (which would also allow one to write extensions for other gesture libraries than hammerjs). This could also allow simple animations by animating this variable in javascript (but this is just on top of my head and probably not such a great idea)

2. Allow other properties.
   Eg. changing opacity (fading in/out) as an object gets dragged. Is this as easy as modifying the Box for other (numeric) css properties and expressing the opacity in relation to a variable?

3. Animations
   Important, but I have no idea how to do this nicely right now. I know you are looking at it, but just wanted to mention it.

4. Angularjs directives
   I'm thinking about a way to integrate this into angularjs, so you could do something like

<div slalom-box slalom-constraints="[...]">...</div><div slalom-manipulator="pan-horizontal" slalom-manipulates="cassowary variable"></div>

But this is still very preliminary (in fact, I just made this up while typing), and it would require some thinking about the way we define cassowary contexts and refer to them using directives. But I believe it would be super-awesome if I or someone else could pull this off.

Need to support 2D panning, i.e.: one gesture driving two manipulators, one for each axis, creating the appropriate animation at the end.

Change Manipulator API so that they're constructed for a given gesture, and disposed when the gesture and animation are over. This will allow creating custom constraints for a new Manipulator that get destroyed when the gesture is finished. We need that to prevent slip on scaling operations.

Any thoughts on how ccss could be used with slalom to allow declarative syntax?

http://constraints.cs.washington.edu/web/ccss-uwtr.pdf

Any progress on this? I'm working on infamous which is declarative 3D scene creation with HTML. It'd be nice to add something like slalom (but declaratively) to it.

(in contrast to A-Frame, Infamous will be more general purpose, for 2D or 3D, for AR/VR or not, whereas A-Frame is specifically for VR).

Trying to use slalom and I ran into an error here:

c is not defined for that file.

Slalom is definitely an incredible approach to make physics-based UIs quicker to develop and way more approachable. I really hope this turns out into a mature library.

Since there is no discussion page on Github, I'll write this as an issue. But please feel free to close this anytime you like to.

I like the idea of the JSON-based syntax, but the String-based syntax feels a little bit weird to write to me. I thought maybe there could actually be a nice way to have it in a more code-based way, so I gave it a shot. I wanted to have it work in a way that integrates nicely with ES6 and code completion features of text editors.

The sample is based on your Pager.js file.

import { Box, Constraint, MotionConstraint, System, Manipulator } from 'Slalom';

var clipDomEl = document.getElementById('clip');
var clip = new Box(clipDomEl);
var contentDomEl = document.getElementById('content');
var content = new Box(contentDomEl);

// Set up physics system with parent box
var system = new System(clip);

system.addConstraints([
    new Constraint(() => clip.left === 0),
    new Constraint(() => clip.top === 0),
    new Constraint(() => clip.right === 750),
    new Constraint(() => clip.top === 750),
    new Constraint(() => content.right === content.left + 3000, {
        strength: Constraint.STRONG }),
    new Constraint(() => content.left === 0, {
        strength: Constraint.WEAK }),
    new Constraint(() => content.top === 0)
    new Constraint(() => content.bottom === 150)
]);

system.addMotionConstraints([
    new MotionConstraint(() => content.left <= 0, {
        physicsModel: MotionConstraint.CRITICALLY_DAMPED })
    new MotionConstraint(() => content.left >= 750, {
        physicsModel: MotionConstraint.CRITICALLY_DAMPED })
    new MotionConstraint(() => content.left % 150, {
        overdragCoefficient: 0,
        physicsModel: MotionConstraint.CRITICALLY_DAMPED })
]);

content.addManipulator(new Manipulator({ x: 'left' }));

Sadly, for now I don't have a deep understanding for the underlying functionality, therefore I don't know if this syntax could work. Especially since the equations can't be parsed out, but are there as regular JavaScript equations. Anyhow, this is a way I'd really enjoy to use it. Maybe it can serve for some inspiration.

If that syntax doesn't work, maybe this could be a variation to increase semantics:

clip.left.addConstraint(Constraint.EQUALS, 0);
content.left.addConstraint(Constraint.LOWER_THAN_OR_EQUALS, 0);

So we can play with it more easily :)

I have a constraint system setup based on the google maps example. I'd like to be able slide the windows up on click, then allow the user to drag down to close. I'm curious if you can provide any hints about what part of the system should be updated to provide a smooth slide open animation based on a click event?

Thanks in advance for your help.

Hammer.js v2.0.5 has changed velocity sign in panend event, resulting in incorrect damping.
Repro: https://jsfiddle.net/simplesmiler/aq57gL4c/
Details: hammerjs/hammer.js#915

Great work on this. Can you provide a quick getting started guide for slalom. I had hacked together some stuff from the examples over on your blog, but I think slalom.js removes some of those dependancies if I am not mistaken.

Thanks

Joe