from Hacker News

Dynamics.js, a JavaScript library to create physics-based animations

by michaelvillar on 6/15/15, 5:33 PM with 47 comments

by drostie on 6/15/15, 6:46 PM
Very cool. There is one thing that I didn't see here which was either a bug or a clever tuning of the numeric parameters: overdamping. When solving the equation:
```
    x''(t) = -2a * x'(t) - k * x(t)
```
(spring force k, linear friction a), the solution is generally a sum of solutions x = C exp(w t) for some arbitrary constant C and w = w(a, k). Plugging this in produces:
```
    w^2 + 2 a w + k = 0
    (w + a)^2 + k - a^2 = 0
    w = -a ± sqrt(a^2 - k)
```
For `k > a^2`, the system is "underdamped" and you see sinusoidal oscillations, and increasing `a` will make the system relax to equilibrium faster. But for `k < a^2`, the system is "overdamped" and increasing `a` will make the system relax slower. (If you find this hard to imagine, think about what happens as `a` tends to infinity: there is so much friction that the spring just barely crawls to its final destination. Comparisons involving molasses and other high-viscosity substances might be apt.
When turning the frequency all the way down, I couldn't find a point where the friction started to make the relaxation to equilibrium slower rather than faster.
by valgaze on 6/15/15, 8:51 PM
If this library is too much muscle & you just need a serviceable animation library, check out Daniel Eden's animate.css: https://github.com/daneden/animate.css
Demo: http://daneden.github.io/animate.css/
Of course there's always a the danger of "overdoing it" w/ ridiculous animations but if you can avoid that temptation it's a very handy tool.
by pimlottc on 6/15/15, 6:35 PM
Neat. Couldn't this be implemented as a generator of easing functions, allowing the animation code to be handled by another project?
http://easings.net/
by agumonkey on 6/15/15, 6:15 PM
Anybody feeling this kind of animations aren't bringing a lot to the table ? I was thrilled to watch lollipop material design (and even kitkat project butter), but it quickly faded (sic). Instant, simple interfaces are needed in many tasks where I don't enjoy or even have the luxury to waste time on distracting animations.
by zecho on 6/15/15, 6:24 PM
As a hacker on Hacker News I'd have to agree with the others that animations are a Very Bad Thing. They are distracting to me, an easily distracted person, who is currently avoiding work by reading Hacker News this afternoon.
by drcode on 6/15/15, 6:17 PM
Please don't show this to anyone at Apple... I don't want the buttons on my next iPod to do a little giggly dance every time I press them.
(BTW- This is great work, I just hope UI devs don't overdo it...)
by talmand on 6/15/15, 6:35 PM
It's a nice library but I'm failing to understand the "physics-based" part.
I'm not seeing anything "physics" in the traditional sense; just manipulating the matrix3d in a transform property of an element in real-time to provide difficult or impossible effects with CSS alone.
by th0ma5 on 6/15/15, 6:10 PM
Amazing library! I question it being targeted towards UI elements. I guess I'm thinking about the "condescending UI" arguments. On phones at least we can mostly turn it down, at least for system-level animations.
by lacker on 6/16/15, 12:32 AM
Interesting that the npm is accessed with npm install dynamics.js. Looks like npm install dynamics is a different library. I wonder if we are running out of npm namespace.
by iraldir on 6/16/15, 9:41 AM
Yeah, I don't really see the point compared to GreenSock's GSAP which is really performant and has some cool plugins.
by html5web on 6/15/15, 6:13 PM
Awesome, thanks for creating this!

by z3t4 on 6/15/15, 6:40 PM

For anyone wanting to do graphics in web pages I would recommend looking into the canvas tag. Example code:

  with (context) {
    beginPath();
    moveTo(100, 100);
    lineTo(100, 300);
    lineTo(300, 300);
    closePath();
    stroke();
  }

by tomphoolery on 6/15/15, 11:55 PM
OK so how do I make this control an LFO in my music? ;)
by johnalxndr on 6/15/15, 6:58 PM
excited to play with this, cheeers
by denniskane on 6/15/15, 7:42 PM
For everyone who loves the infinite possibilities of client-site JavaScript, and who at the same time does not love the blink-taggy smell that this kind of library evokes, I present to you the world's first distributed, web-based operating system: see https://www.urdesk.net/desk
This has been under very active development for going on 3 years now, and it is just starting to get to the point where it can stop being called a prototype or experiment.