@truecms/animate

A JavaScript function to open, close and toggle the display of page elements.

Contents

• Install
• API
• Dependency graph
• Tests
• Release History
• License

Install

pnpm add @truecms/animate

npm install @truecms/animate

⬆ back to top

API

Animate has 3 public functions:

• AU.animate.Run( options )
• AU.animate.Stop( options )
• AU.animate.Toggle( options )

Run

AU.animate.Run( options )

The options settings are:

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 - callback function to run when the animation completes (optional)

Example:

AU.animate.Run(
  element: document.getElementById('elementId'),
  property: 'height',
  endSize: 'auto',
  speed: 1000,
  callback: myFunction,
)

Stop

AU.animate.Stop( options )

The options settings are:

element - DOM node you want to stop animating (this can only be a single element)

Example:

AU.animate.Stop(
  element: document.getElementById('elementId'),
)

Toggle

AU.animate.Toggle( options )

The options settings are:

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)

Example:

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() },
)

⬆ back to top

Dependency graph

animate

⬆ back to top

Tests

The visual test: https://design-system-components.truecms.com.au/packages/animate/tests/site/

Run jest for the unit tests

⬆ back to top

Release History

• v2.0.0 - # 7f941cd: Document stewardship responsibilities under the TrueCMS organisation, lock the Node 22 baseline into the governance docs, and ship bundle parity plus dry-run release safeguards so Drupal 11 users and npm consumers remain supported

• v1.0.14 - Fix unsafe-eval CSP issue

• v1.0.13 - Remove --save-dev flag from readme instructions

• v1.0.12 - Removed uikit references

• v1.0.11 - Update dependencies

• v1.0.10 - Update dependencies

• v1.0.9 - Update browser-sync dependency

• v1.0.8 - Update dependencies

• v1.0.7 - Fixing bug where openSize of 0 gets turned into auto

• v1.0.6 - Removing web pack dev server, updating dependencies

• v1.0.5 - Fixed build scripts for Windows

• v1.0.4 - Change npm run watch browser-sync location

• v1.0.3 - Update dependencies

• v1.0.2 - Fix typo in homepage link

• v1.0.1 - Changing homepage link

• v1.0.0 - Moved to AU namespace, fixed export

• v0.1.5 - Fixed pancake config

• v0.1.4 - Pinned pancake plugins

• v0.1.3 - Exposed GetCSSPropertyBecauseIE publicly, added prefunction, postfunction

• v0.1.2 - Removed core as dependency

• v0.1.1 - 💥 Initial version

⬆ back to top

License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};