JavaScript physics animations library – dynamics.js

Try dynamics.js – a great JavaScript physics animations library, and create nice, physics-based animations. Like a boss.

A great JavaScript physics animations library

Dynamics.js is a JavaScript library to create physics-based animations. In JS code simply adjust the type of animation (e.g. dynamics.spring), the duration, frequency, friction and other params, to get a nice final effect.

JavaScript physics animations with dynamics.js
JavaScript physics animations with dynamics.js

Usage

Include dynamics.js into your page:

<script src="dynamics.js"></script>

Now we can animate CSS properties of any DOM element:

var el = document.getElementById("logo")
dynamics.animate(el, {
  translateX: 350,
  scale: 2,
  opacity: 0.5
}, {
  type: dynamics.spring,
  frequency: 200,
  friction: 200,
  duration: 1500
});

We also can animate SVG properties:

var path = document.querySelector("path")
dynamics.animate(path, {
  d: "M0,0 L0,100 L100,50 L0,0 Z",
  fill: "#FF0000",
  rotateZ: 45,
  // rotateCX and rotateCY are the center of the rotation
  rotateCX: 100,
  rotateCY: 100
}, {
  friction: 800
});

A more!

Many interesting effects / examples at project homepage:

http://dynamicsjs.com

Get this great JavaScript physics animations library from GitHub:

https://github.com/michaelvillar/dynamics.js

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1