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

by michaelvillar • 11 years ago

286 47 11 years ago

th0ma5• 11 years ago

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.

agumonkey6• 11 years ago

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

very nice read.

html5web• 11 years ago

Awesome, thanks for creating this!

agumonkey6• 11 years ago

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.

zecho5• 11 years ago

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.

ask5• 11 years ago

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

agumonkey6• 11 years ago

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.

pwnna• 11 years ago

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)

mhd• 11 years ago

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…

agumonkey6• 11 years ago

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.

jessedhillon• 11 years ago

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

agumonkey6• 11 years ago

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

gdubs• 11 years ago

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.

agumonkey6• 11 years ago

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

drcode• 11 years ago

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

jonas21• 11 years ago

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

zecho5• 11 years ago

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.

shogun21• 11 years ago

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.

BFay• 11 years ago

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.

zecho5• 11 years ago

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

untog• 11 years ago

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

zecho5• 11 years ago

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

talmand2• 11 years ago

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.

shred452• 11 years ago

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

talmand2• 11 years ago

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.

aaggarwal• 11 years ago

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.

pimlottc• 11 years ago

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/

grrowl• 11 years ago

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

z3t42• 11 years ago

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

ahoge• 11 years ago

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.

z3t42• 11 years ago

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.

drostie• 11 years ago

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.

shred452• 11 years ago

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.

johnalxndr• 11 years ago

excited to play with this, cheeers

denniskane• 11 years ago

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.

l1n• 11 years ago

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.

nacs• 11 years ago

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.

cnp• 11 years ago

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

realusername• 11 years ago

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

valgaze• 11 years ago

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.

Gabriel_Martin• 11 years ago

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

tomphoolery• 11 years ago

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

alexweber• 11 years ago

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

lacker• 11 years ago

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.

irickt• 11 years ago

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

iraldir• 11 years ago

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

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

Related Stories