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

Category: Animation , Javascript , Recommended | August 28, 2016
Author: michaelvillar
Views Total: 2,547
Official Page: Go to website
Last Update: August 28, 2016
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply