dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Animate

v1.0.11

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 @gov.au/animate
Tags
Contributors
  • Simon Schwartz avatar picture
  • Dominik Wilkowski avatar picture

Default

Toggle a property between two values across one item.

Example

<button aria-controls="animate-example-1" onclick="AU.animate.Run({
    element: document.getElementById( 'animate-example-1' ),
    property: 'width',
    endSize: 0,
    speed: 500,
  })">Close</button>

<button aria-controls="animate-example-1" onclick="AU.animate.Run({
    element: document.getElementById( 'animate-example-1' ),
    property: 'width',
    endSize: 'auto',
    speed: 500,
  })">Open</button>

<button aria-controls="animate-example-1" onclick="AU.animate.Toggle({
    element: document.getElementById( 'animate-example-1' ),
    property: 'width',
    speed: 500,
  })">Toggle</button>

<button aria-controls="animate-example-1" onclick="AU.animate.Stop( document.getElementById('animate-example-1') )">Stop</button>

<div style="background:#663399; margin-top:16px" id="animate-example-1">&nbsp;<br /><br /><br /></div>

<!-- Make sure you include the uikit javascript file -->
<script type="text/javascript" src="script.js"></script>

Multiple

Toggle a property between two values across multiple items.

Example

<button aria-controls="animate-example-2" onclick="AU.animate.Run({
    element: document.querySelectorAll( '.animate-example' ),
    property: 'width',
    endSize: 'auto',
    speed: 1000,
  })">Open all</button>

<button aria-controls="animate-example-2" onclick="AU.animate.Run({
    element: document.querySelectorAll( '.animate-example' ),
    property: 'width',
    endSize: 0,
    speed: 1000,
  })">Close all</button>

<button aria-controls="animate-example-2" onclick="AU.animate.Toggle({
    element: document.querySelectorAll( '.animate-example' ),
    property: 'width',
})">Toggle all</button>

<div id="animate-example-2">
  <div class="animate-example" style="background:#663399; margin-top:16px" >&nbsp;<br><br><br></div>
  <div class="animate-example" style="background:#663399; margin-top:16px; width: 0" >&nbsp;<br><br><br></div>
  <div class="animate-example" style="background:#663399; margin-top:16px" >&nbsp;<br><br><br></div>
</div>

<!-- Make sure you include the uikit javascript file -->
<script type="text/javascript" src="script.js"></script>