Animate Elements Between States – Animatum

Category: Animation , Javascript | February 19, 2020
Views Total:83 views
Official Page:Go to website
Last Update:February 19, 2020


Animate Elements Between States – Animatum


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 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>

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"
// Reverse the order of the elements
// Animate from the "before state" to the new state

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)

You Might Be Interested In:

Leave a Reply