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

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 auds 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 auds javascript file -->
<script type="text/javascript" src="script.js"></script>

Related components

Feedback