https://github.com/desandro/practical-ui-physics

Learn basic physics for UI
https://github.com/desandro/practical-ui-physics

Last synced: about 2 months ago
JSON representation

Learn basic physics for UI

• Host: GitHub
• URL: https://github.com/desandro/practical-ui-physics
• Owner: desandro
• Created: 2015-08-05T18:56:02.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-12T18:57:20.000Z (about 9 years ago)
• Last Synced: 2024-02-15T00:37:14.240Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 596 KB
• Stars: 323
• Watchers: 9
• Forks: 13
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Practical UI physics

Demos for my talk _Practical UI physics_.

+ [Watch the video on YouTube](https://www.youtube.com/watch?v=90oMnMFozEE)

+ [Slides on Speakerdeck](https://speakerdeck.com/desandro/practical-ui-physics)

Adding physics-based motion to UI can make digital interactions feel natural, comfortable, and delightful. So why is it so hard to get right, especially on the web? While mobile device SDK's have physics-based libraries built-in, web developers are missing a straight-forward way to add physics to their sites. This talk aims to solve that. Physics is a huge subject, and physics programming is often intimidating. But for UI developers, we need only to take advantage of its core principles in a practical model. This talk will cover the fundamentals of physics programming, how to develop your own physics model in JavaScript, and how to use that model to make UI feel natural.

Demos also available on CodePen — [Practial UI physics collection](http://codepen.io/collection/XgYvmv/)

+ [basic](http://codepen.io/desandro/pen/WvWGej)

+ [step graphs](http://codepen.io/desandro/pen/zGXKYm)

+ [drag](http://codepen.io/desandro/pen/zGXKOJ)

+ [attraction](http://codepen.io/desandro/pen/XbQjbP)

+ [attraction drag](http://codepen.io/desandro/pen/oXOzXr)

+ [attraction conditional](http://codepen.io/desandro/pen/BNELoQ)

+ [attraction two targets](http://codepen.io/desandro/pen/VLNKew)

+ [gravity well](http://codepen.io/desandro/pen/jPRMWa)

+ [wind](http://codepen.io/desandro/pen/doLpMb)

+ [resting position](http://codepen.io/desandro/pen/yNraOK)

+ [rubber band bounds](http://codepen.io/desandro/pen/QbPKEq)

+ [photo scroller](http://codepen.io/desandro/pen/VLNKKY)

Demo use mouse events to keep code simple, even though I recommend using physics for touch-based devices. Yes, I realize the irony.

## Additional resources

+ [Nature of Code](http://natureofcode.com/) by Daniel Shiffman, Chapters 1 & 2

+ [Coding Math videos on YouTube](https://www.youtube.com/user/codingmath/) by Keith Peters