Animate

v2.0.0

Animations add visual effects to page elements and help users understand what buttons to click or what to do next in a website.

Released

History
View changes
Install
npm i @gold.au/animate
Tags
Contributors
  • Dominik Wilkowski avatar picture
  • Simon Schwartz avatar picture

Javascript Usage

AU.animate.Toggle(
    element: document.getElementById('elementId'),
    property: 'height',
    closeSize: 0,
    openSize: 'auto',
    speed: 1000,
    prefunction: function( element, state ) { myPreFunction() },
    postfunction: function( element, state ) { myPreFunction() },
    callback: function( element, state ) { myCallbackFunction() },
);

Options

AU.animate.Toggle( options )

Option Description
element DOM node/s you want to animate
property CSS property you want to animate (optional, defaults to height)
endSize 'auto' or pixel size of the property after the animation has finished (optional)
speed Animation speed in milliseconds (optional, defaults to 250ms)
callback Function to be executed after the animation ends, passes {object} element, {string} state (optional)

AU.animate.Stop( options )

Option Description
element DOM node/s you want to animate

AU.animate.Toggle( options )

Option Description
element DOM node/s you want to animate
property CSS property you want to animate (optional, defaults to height)
openSize Pixel size of the property when the element is open (optional, defaults to auto)
closeSize Pixel size of the property when the element is closed (optional, defaults to 0)
speed Animation speed in milliseconds (optional, defaults to 250ms)
prefunction Function to be executed before any animation starts, passes {object} element, {string} state (optional)
postfunction Function to be executed after any animation ends, passes {object} element, {string} state (optional)
callback Function to be executed after the animation ends, passes {object} element, {string} state (optional)

Related components

Feedback