Dynamics.js, a JavaScript library to create physics-based animations | Hacker News Reader

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

dynamicsjs.com

286 pointsmichaelvillar47 comments

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.

I think that given the 'duration' setting, the author made sure that the event would take place in a given time, constraining the problem.

Edit: that being said, it looks like in the heavily damped case it takes much less than the full duration to finish. That is probably a bug.

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.

I'm actually working on adding more subtle, and understated animations to compliment his library at the moment: http://gabrielmtn.github.io/reanimate/

It's a definite WIP so any thoughts / ideas / opinions are welcome: Gabrielmtn+github@gmail.com

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/

Many of these effects are impossible with CSS3[1], so Dynamics.js just seems to animate `transform` CSS properties with regular javascript. Definitely nice, but it would be great to have a tool like this spit out real css animations which don't rely on javascript every frame.

[1]: http://easings.net/#easeOutElastic

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.

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.

websites for Kids is one of the places where animated UI can be used.

yes, I agree. kids love animations. adults don't like animations, except for creepy adults who watch cartoons and college kids that still watch The Simpsons.

Anything not time constrained, where thinking and subtle communication can take place. Otherwise the amount of animation can be reduced to a tiny bit without losing much. Or maybe for first times, so people can understand the flow of data through transitions between pages / frames / etc and when familiar, they can navigate through parts of the GUI without animation-helpers.

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)

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…

Yeah, I said this in a general context, nothing against the linked project.

Last bit is interesting, animation can convey useful information, but mostly they're attention grabber. They have a place, but care is required.

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

https://en.wikipedia.org/wiki/Sic#The_.22ironic_use.22_of_si...

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.

Totally agree, thanks for the idiom, it's critical to have continuous instead of discrete (especially if too disruptive) changes.

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.

How do you feel about the animations used in material design?

Animations for the sake of having animation is really distracting. But if used subtly and with purpose, they could help enhance the user experience.

Since I'm aware of material design, I find myself constantly looking for the animations and trying to evaluate how they work on me, which kind of defeats the purpose. I keep seeing those circles everywhere!

I think it's the right direction, though; animating to subtly direct user attention to the right place.

Animation for the sake of animation is sometimes called "art." I'm fine with that.

As a hacker on Hacker News you're not a typical user.

Don't get me wrong, I feel like a lot of animation is unnecessary but if you did what Hacker News advised every webpage would look the same in Lynx as it does in Chrome. Animations can serve a purpose - to focus the user's eye, to give them a sense of where something is going to and from, etc. etc.

They're not universally bad, and this is a fascinating library - it deserves more credit than "animations are bad".

Yes. I agree. Not all animations are bad. I think animated GIFs can also be an entertaining distraction from hacking on my business.

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

Too late. You can already do simple spring animations on UI elements in iOS:

https://developer.apple.com/library/ios/documentation/UIKit/...:

As well as a full-on physics with collisions, etc:

http://www.raywenderlich.com/50197/uikit-dynamics-tutorial

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.

You don't consider motion based on gravitational and spring-mass models to be an application of physics?

Is they code actually performing physics calculations, or is it a good fake? I can fake much of that behavior with animation keyframes and that doesn't make it physics in my mind.

If it is, then I suppose I'll agree it's physics based.

I think by physics-based, the author means the motion seen in physical world, such as the example shown in the library page in which the animation resembles the motion of a mass-spring damper, its a second order system, by changing the parameters, one can observe under and over damping.

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.

That article ? http://www.theverge.com/2011/12/9/2616204/the-condescending-...

very nice read.

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.

Note that npm now has scopes http://blog.npmjs.org/post/116936804365/solving-npms-hard-pr...

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

Since ES5, you can't use `with` in strict mode.

Well, you shouldn't use it anyways since it's confusing/ambiguous and it's also terrible for performance.

I wanted to make a point about all the confusing new features of ES6 that are just there to save a few key strokes, and will haunt you forever.

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

Well, I suppose you could use the Web MIDI API: http://webaudio.github.io/web-midi-api/

Although if you need to route it to an external (non-browser) output, you might consider using OSC. There appear to be multiple implementations, but here's one: https://github.com/marmorkuchen-net/osc-js

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.

What features of Chrome are you utilizing that prevent you from supporting Firefox? I'm curious, as when I clicked through I got some kind of manifesto about Chrome being the future, and seeing as your code isn't open source I've no recourse but to ask you about your project.

> web-based operating system

"Chrome-based" would be more accurate because it doesn't even work in the latest Firefox.

Also, it contains a full page rant on why Firefox is bad (because of something about Netscape and AOL -- apparently it's still 1995).

If you're going to call it "web-based" try targeting more than 1 browser regardless of your personal beliefs.

How does this relate to to the post other than general, tongue-in-cheek criticism?

Don't take this as a harsh criticism but I'm also building a large JS-based application and things have slightly changed since Firefox 1.0 I think...

Reply on news.ycombinator.com