Author: | michaelvillar |
---|---|
Views Total: | 983 views |
Official Page: | Go to website |
Last Update: | August 28, 2016 |
License: | MIT |
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