Javascript Library To Create Physics-based CSS Animations – dynamics.js

Preview:

Description:

dynamics.js is a simple yet robust JavaScript library to create physics-based CSS animations for CSS properties, SVG elements, and Javascript objects. Built with CoffeeScript.

Animation types included:

• Spring
• Bounce
• forceWithGravity
• Gravity
• Bezier
• easeInOut
• easeIn
• easeOut
• Linear

How to use it:

Load the dynamics.js JavaScript library in your document.

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

Basic usage:

/* Animates an element to the properties with the animation options.
   el is a DOM element, a JavaScript object or an Array of elements
   properties is an object of the properties/values you want to animate.
   options is an object representing the animation
     -- type is the animation type: dynamics.spring, dynamics.easeInOut,... (default: dynamics.easeInOut)
     -- frequency, friction, bounciness,... are specific to the animation type you are using
     -- duration is in milliseconds (default: 1000)
     -- delay is in milliseconds (default: 0)
     -- complete (optional) is the completion callback
     -- change (optional) is called at every change
*/
dynamics.animate(el, properties, options)
/* Stops the animation applied on the element */
dynamics.stop(el)
/* This is applying the CSS properties to your element with the correct browser prefixes. */
dynamics.css(el, properties)
/* Dynamics.js has its own setTimeout. 
   The reason is that requestAnimationFrame and setTimeout have different behaviors. 
   In most browsers, requestAnimationFrame will not run in a background tab while setTimeout will. 
   This can cause a lot of problems while using setTimeout along your animations. 
   I suggest you use Dynamics's setTimeout and clearTimeout to handle these scenarios.
*/
dynamics.setTimeout(fn, delay)
// Clears a timeout that was defined earlier
dynamics.clearTimeout(id)
/* Toggle a debug mode to slow down every animations and timeouts. 
   This is useful for development mode to tweak your animation. 
   This can be activated using Shift-Control-D in the browser.
*/
dynamics.toggleSlow()

Changelog:

08/28/2016

• v1.1.5