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.

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.

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/

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.

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.

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

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.

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.

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.

Yeah, I don't really see the point compared to GreenSock's GSAP which is really performant and has some cool plugins.

Awesome, thanks for creating this!

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();
  }

OK so how do I make this control an LFO in my music? ;)

excited to play with this, cheeers

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.

That's a bit of the problem with showcases, they tend to look like 90s flash animations, but that doesn't mean that the intention is recreating the exact same effect on regular web pages. But once you build a generic tool, showing off every feature isn't necessarily a bad idea, even if spuriously using it would be.

But generally I agree, animations are easily overused. They're quite useful for showing (and sometimes hiding) UI elements, as this leads to a interface devoid of shock and surprise. Heck, I think I read something about that in a paper that predates the web…

I think there's value in these physics-based animations. Immediate motion is jarring ('temporal aliasing'), and ease-in/ease-out can feel really sluggish. Spring easing can be a lot more satisfying.

I don't understand why you wrote (sic) after a sentence of your own creation. AFAIK sic is used when you are quoting another person: if that quote includes a mistake of some kind, sic indicates that it was written or spoken as you have reproduced it. "Sic erat scriptum," meaning "thus it was written." [0]

[0] Source: https://en.wikipedia.org/wiki/Sic

This. Sometimes the animations and what not are distracting for the actual content. It's almost like the bad powerpoint transitions we had.

As a sidenote.. I'm currently working on a patch to CyanogenMod 12.1 that allows you turn off fancy animations (such option exists already when you turn on power save mode)

Yes. I agree. I too feel this kind of animation library should not be used where animation libraries make little or no sense to use them. In fact, I'd go a step further and agree that no animation libraries should be used when animation libraries are not needed, not even this one, which looks pretty neat.

Where should animation libraries be used? I'd think they should be used where a user would appreciate an animation. Such places could be while waiting for something to load, or maybe on a website dedicated to animation libraries. I think that would be an appropriate place for animations. It'd be weird if a website dedicated to animations didn't have animations on it.