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
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.
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.
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]
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.
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.
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.
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.
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".
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.
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.
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.
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.
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.
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
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.
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.