
Dynamics.js, a JavaScript library to create physics-based animations - michaelvillar
http://dynamicsjs.com
======
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 < 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_.

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

------
valgaze
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](https://github.com/daneden/animate.css)

Demo:
[http://daneden.github.io/animate.css/](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
I'm actually working on adding more subtle, and understated animations to
compliment his library at the moment:
[http://gabrielmtn.github.io/reanimate/](http://gabrielmtn.github.io/reanimate/)

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

------
pimlottc
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/](http://easings.net/)

~~~
grrowl
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](http://easings.net/#easeOutElastic)

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

~~~
zecho
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
websites for Kids is one of the places where animated UI can be used.

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

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

------
drcode
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
Too late. You can already do simple spring animations on UI elements in iOS:

[https://developer.apple.com/library/ios/documentation/UIKit/...](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/index.html#//apple_ref/occ/clm/UIView/animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion):

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

[http://www.raywenderlich.com/50197/uikit-dynamics-
tutorial](http://www.raywenderlich.com/50197/uikit-dynamics-tutorial)

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

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

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

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

~~~
agumonkey
That article ? [http://www.theverge.com/2011/12/9/2616204/the-
condescending-...](http://www.theverge.com/2011/12/9/2616204/the-
condescending-ui)

very nice read.

------
lacker
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
Note that npm now has scopes [http://blog.npmjs.org/post/116936804365/solving-
npms-hard-pr...](http://blog.npmjs.org/post/116936804365/solving-npms-hard-
problem-naming-packages)

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

------
html5web
Awesome, thanks for creating this!

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

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

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

~~~
alexweber
Well, I suppose you could use the Web MIDI API:
[http://webaudio.github.io/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](https://github.com/marmorkuchen-net/osc-js)

------
johnalxndr
excited to play with this, cheeers

------
denniskane
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](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.

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

