Animate Elements Between States – Animatum

Preview:

Description:

Animatum is a tiny JavaScript animation library used to animate all children elements in a container based on the current animation state.

How to use it:

1. Install and import the Animatum as a module.

# NPM
$ npm install animatum --save

import Animatum from 'animatum';

2. Or include the animatum.js from the dist folder.

<script src="./dist/animatum.js"></script>

3. Create a list of elements you want to animate.

<div id="container" class="list-group">
  <div class="list-group-item">item 1</div>
  <div class="list-group-item">item 2</div>
  <div class="list-group-item">item 3</div>
  <div class="list-group-item">item 4</div>
  <div class="list-group-item">item 5</div>
  <div class="list-group-item">item 6</div>
</div>

4. Initialize the Animatum library.

let container = document.getElementById('container');
let animatum = new Animatum(container, {
    // options
});

5. Reorder the list using the Animatum.

// Save the "before state"
animatum.captureAllStates();
// Reverse the order of the elements
container.append(...Array.from(container.childNodes).reverse());
// Animate from the "before state" to the new state
animatum.animateAll();

6. Set the duration of the animation. Default: 150.

let animatum = new Animatum(container, {
    duration: 1000
});

7. Apply an easing function to the animation.

let animatum = new Animatum(container, {
    easing: 'ease'
});

8. Ignore certain elements.

let animatum = new Animatum(container, {
    ignore: function() { return false; } // or string
});

9. Add/remove animation states.

animatum.addState(state: AnimationState)
animatum.removeState(element: HTMLElement)