Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

dynamicsjs.com

Post reply on HN
Print view View original

21–30 of 49 posts

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

#21

Post by agumonkey »

mhd wrote: post #20
agumonkey wrote: post #4

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…

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.

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

#22

Post by shred45 »

talmand wrote: post #16

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?

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

#23

Post by drostie »

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

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

#24

Post by agumonkey »

th0ma5 wrote: post #2

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.

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

#25

Post by aaggarwal »

talmand wrote: post #16

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.

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

#26

Post by jessedhillon »

agumonkey wrote: post #4

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.

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

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

#27

Post by shred45 »

drostie wrote: post #23

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 ± sq…

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.

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

#28

Post by jonas21 »

drcode wrote: post #5

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

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

#30

Post by agumonkey »

jessedhillon wrote: post #26
agumonkey wrote: post #4

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.

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...
Post reply on HN