Extras

Just Animate has extra helpers that can make certain animation tasks easier.

splitText()

The splitText() function splits the text of an element into words and characters so each word or character can be animated separately. Formatting should be preserved with each character and word is wrapped in its own element.

const characterElements = splitText('#element1').characters;
const wordElements = splitText('#element1').words;

Both characters and words can be provided to the targets property because they both return a list of elements.

shuffle()

Adding variety to animations can make them feel more alive. The shuffle() function accepts a list of items returns one of the items at random to help with that.

In this example, shuffle() chooses the color blue, red, or green at random between the color black:

const timeline = animate({
    targets: '#element',
    duration: 1000,
    web: {
        backgroundColor: [
             'black',
             shuffle(['red', 'green', 'blue']),
             'black'
        ]
    }
})

shuffle() can accept any array of items including whole animation configurations:

const timeline = animate(
    shuffle([
      { /* ... */ },
      { /* ... */ }
    ])
);

timeline.play()

Console demo

random()

Returns a random number/unit in a range.

// returns a number (including decimals) between 0 and 100
random(0, 100)

// returns -100px to 100px (only whole numbers)
random(-100, 100, 'px', true)

// returns a whole number between 0 and 100
const start = 0;
const end = 100;
const unit = undefined;
const onlyWholeNumbers = true;
random(start, end, unit, onlyWholeNumbers);