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

What is Framer? Join the Community
Return to index
Koen Bok
Posted Oct 31 - Read on Facebook

Over time I'd love to integrate Framer with a more full blown physics engine. I have my eye set on these two to begin with:

http://wellcaffeinated.net/PhysicsJS/examples/
http://soulwire.github.io/Coffee-Physics/

What are good real world examples of ui based on more advanced physics? Or are you walking around with specific ui around real world physics that you can share? An example would be how the chat bubbles behave on scroll in iOS7 messages.

The main reason for me to study more of these is so I can adapt/design the physics ways of defining behavior into something that makes sense for ui design.

30 Comments

Aaron Carámbula

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.

Thomas Aylott

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

Thomas Aylott

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.

Thomas Aylott

#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.

Thomas Aylott

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.

Johannes Eckert

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.

Johannes Eckert

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!)

Julius Tarng

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

Julius Tarng

Big fan of iMessage bubbles scrolling "weight" tho

Julius Tarng

And notif center gravity

Julius Tarng

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

Steven Otto

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.

Thomas Aylott

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).

Koen Bok

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

Dominique Briggs

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.

Akshay Aurora

Maybe you could make the API similar to UIKit Dynamics.

Andrew Nalband

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

Jordan Robert Dobson

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

Jordan Robert Dobson

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.

Andreas Mitschke

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

Jordan Robert Dobson

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

Marc Krenn

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?

Jordan Robert Dobson

Yep. I have.

Andrew Nalband

The FAB - maybe the greatest fail in material design

Jordan Robert Dobson

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. :)

Marc Krenn

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!

Read the entire post on Facebook