Animation

function

Animation()

Dependencies:

About:

Creates animations on one or more elements. This class is static and so doesn't need to be instantiated.

Prioritises using CSS3 transitions for animations where possible, and falls back to JavaScript animation when the browser doesn't support CSS3, or the property being animated cannot be done with transitions.

Can animate between a number of unit types, depending on the attribute being modified. Supported: px, %, vw, vh, em, rem, rad, grad, deg, turn

Automatically adds prefixes to attribute names where needed.

Cannot parse matrix transforms. If a matrix is found, this will essentially be reset to the identity matrix. However it can work with any non-matrix transform string defined inline.

A demonstration of some of the features of this class can be seen here: Animation-demo.js.html

start

method

Animation.prototype.start()

Option name	Type	Description
element	domelement	The element(s) to perform the animation on. Either a DOM element, NodeList, or a jQuery selection
properties	object	The style attributes to animate, with their respective target values
options	object	(optional) An object containing the settings for this animation duration {number: 1000} Time in milliseconds representing how long the animation should take easing {string: "linear"} The easing function to use. Either the name of an inbuilt method, or a custom easing function defined CSS style, eg. "cubic-bezier(0.68, -0.55, 0.265, 1.55)" delay {number: 0} Time in milliseconds to wait before the animation should start playing loop {boolean: false} Loop the animation from start to end, then jump back to start and replay bounce {boolean: false} Loop animation back and forth in both directions flipBounceEasing {boolean: false} Reverse the easing function while on the return journey jsMode {boolean: false} Have this animation performed by JavaScript, instead of a CSS3 transition progress {function: undefined} A method to run on each frame of the animation. Passes two arguments to the method: an event object, and a progress percentage between 0 and 1 loopComplete {function: undefined} A method to run each time a looped animation has completed. This also fires on each end of a bounce animation.
callback	function	(optional) The method to run after the animation has completed. Passes an event object as an argument, so e.target refers to the DOM element that was animated

Start a new animation. This will automatically stop existing animations on the passed element, so Animation.stop() doesn't need to be called first.

Inbuilt easing function names:
linear, easeInSine, easeOutSine, easeInOutSine, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc

Example

stop

method

Animation.prototype.stop()

Option name	Type	Description
element	domelement	The element(s) to stop all active animations on. Either a DOM element, NodeList, or a jQuery selection

Stop all animations on an element

pause

method

Animation.prototype.pause()

Option name	Type	Description
element	domelement	The element(s) with active animations that you wish to pause. Either a DOM element, NodeList, or a jQuery selection

Pause all animations on an element

resume

method

Animation.prototype.resume()

Option name	Type	Description
element	domelement	The element(s) with paused animations on that you wish to resume. Either a DOM element, NodeList, or a jQuery selection

Resume animation on an element that has previously been paused

setJSMode

method

Animation.prototype.setJSMode()

Option name	Type	Description
prioritiseJS	boolean	Set to true to have all future animations run with JavaScript by default

Set all animations to either animate with JavaScript or to use CSS animation where possible