This is a read-only archive of the Framer Community on Facebook.

Oh this is an awesome development.
- Chat Heads (drag one and the others follow)
- iOS7 reminders
The biggest thing I've found in working with physics is that the tie to gestures is tough. snapping to the touch position, lagging behind, or changing resistance are all necessary options.

Sometimes you have an explicit end state that you want to transition towards in a pleasant way. Other times you want to apply some force and let the physical properties of the system define its state.

E.g. tweening between layer comps vs scrolling or angry birds

I'm not sure an actual physics engine is what anyone should be using for UI design. I more want something that 'feels' physics-ish without requiring a real simulation. I want Disney physics.

#idea

A composition should be able to have many "dimensions".
Any View should be able to become "physical".
"physical" elements in separate "dimensions" cannot interact.
(e.g. an item in a scrollview shouldn't collide with the tab bar)
Pointers (mouse or fingers) are "physical" elements that can travel between dimensions.

Normally dimensions are fixed to their parent dimension. However, a ScrollView is a dimension inside a door. The door is fixed to the parent dimension, but the universe inside that door is unattached. You can reach through the door and move the entire internal universe around relative to the doorway.

You can see through the door. Pointers can only enter through the door, but they may leave from anywhere. That way you can begin "scrolling" the internal universe around by grabbing any of its visible pixels, continue dragging it even after dragging outside the frame of the door and then release it again without having to pass back through the door.

The web doesn't make it easy to make arbitrary holes in elements, but Framer shouldn't necessarily expose that implementation detail to designers. We may eventually get a WebGL backend for Framer or something that doesn't have the same limitations.

I also think that some sort of physic-ish behaviour is great — just like the spring function. I'd draw a strong line between this and a real simulation that would lead to game design etc.

a few recent examples of physic-ish behaviour:
— TweetBot: Close a picture detail by swiping it off like a real object
— Evernote: instead of rubberbanding on the homescreen, all the objects are elastic and create a different rubberband feeling (I *love* this one!)

If you're even the slightest bit comfortable w objc ui kit dynamics makes basic physics super easy

Big fan of iMessage bubbles scrolling "weight" tho

And notif center gravity

Maybe looking into how uikitdynamics sets up their physics will give some ideas, if they were similar it'd be really easy to port to production

It seems a lot of work to reverse-engineer UIKit Dynamics since you only have access to the classes header files. The actual implementation of UIDynamicAnimator and UIDynamicBehavior's subclasses (UIGravityBehavior, UICollisionBehavior etc.) is hidden.

This is what we're using here at Facebook: http://facebook.github.io/rebound/
This page has a JS implementation also, maybe Framer could use that (or something like it).

https://github.com/facebook/rebound/blob/gh-pages/spring.js

https://github.com/facebook/rebound/blob/gh-pages/example.js

Play with this: https://itunes.apple.com/us/app/windosill/id418226282

Thomas seems they use the exact same RK4 method for springs as Framer does.

https://github.com/kripken/ammo.js/

I think it's mainly about getting realistic physics in applications to give a more natural feeling and enhancing predictability in the users interaction with the UI. We have bézier curves but they're not enough (a new CSS property would be awesome for some sort of spring feedback or collision).

I think we see more physics inspired UI's such as Facebook chat heads for example because the interaction is direct touch and we're used to manipulating physical objects in real life and seeing feedback. Plus there aren't many javascript physics libraries out there that are easily understood by your average designer/website developer. How useful this kind of thing is in a ui controlled primarily by a cursor is debatable but its always cool to see!

But having a simple physics library geared towards standard UI needs, such as slide out menus, fade in/outs, snapping, resistance could open up a new way of enhancing web application UI's.

Maybe you could make the API similar to UIKit Dynamics.

I'd love this for prototyping games in Framer. I've found framer to be one of the most useful tools for testing certain kinds of gameplay

One that's been around for a while is the Starbucks reward stars... In the video I'm rotating my phone top to bottom.

http://jrdn.io/2U3I1X0p1T0H

I've been looking to do something similar to the chat heads but asking all the following items to keep up with your drag on a delay seems to fall apart real quick. I think the grouped movement would be key... where any element of a group can be the "director" and the others follow until the next "director" is chosen to lead the group.

Wow the cloth engine is incredible.

I somehow think that those prototypes incorporating advanced physics might walk far from the market's possibilities. Progressive enhanced aside, those things would be awesome, but the majority of phones can not deal with em without sucking the battery up. ^^

Great thing to put effort into anyways :D

http://iamralpht.github.io/physics/ Anything here would be awesome too.

Jordan, I'm pretty confident you could replicate all of those effects with framer's current capabilities ("Lock Screen Gravity" might require some custom pseudo-physics functions). Is there an effect you're particularly interested in recreating?

(btw the "FAB" one is bonkers. love the idea, but it'd undoubtedly bomb sooo hard at usertests)

regarding your chat head problem: Have you tried "passing down" X/Y-values from the "director" chat head to the next one (and so on) using arrays?

Yep. I have.

The FAB - maybe the greatest fail in material design

I'll distill it down and show you guys this weekend. Maybe there is a better pattern I could use. I've tried a few things. :)

Wrote a short essay draft on Medium titled "Why the FAB has to die" only a few days before Google removed it from Keep. Never bothered to publish it ever since ... ;)

Cool, Jordan, keep us updated!