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.
Neat. Couldn't this be implemented as a generator of easing functions, allowing the animation code to be handled by another project?
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.
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.
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...)
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.
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.
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();
}OK so how do I make this control an LFO in my music? ;)
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.
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:
(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: 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.