Chain-able utility functions V4

Chain-able utility functions allow for the creation of complex operations by combining multiple functions in a single expression.

const clampRoundPad = utils.clamp(0, 100).round(2).padStart(6, '0');
clampRoundPad(125)   // '000100'
clampRoundPad(75.25) // '075.25'

The following utility functions support chaining:

Chain-able functions works great in combinaison with the modifier tween parameter.

Usage

Chain-able functions are created when calling a utility function without its optional value parameter:

const chainableClamp = utils.clamp(0, 100); // Returns a chain-able function
const result = chainableClamp(150); // 100

Chaining

Chain-able functions are combined like this:

const normalizeAndRound = utils.mapRange(0, 255, 0, 1).round(1);
normalizeAndRound(128); // '0.5'
normalizeAndRound(64);  // '0.3'

Chain-able utility functions code example

import { animate, utils } from 'animejs';

animate('.value', {
  innerHTML: 1000,
  modifier: utils.wrap(0, 10).roundPad(3).padStart(6, '0'),
  duration: 100000,
  alternate: true,
  loop: true,
  ease: 'linear',
});

<div class="large row">
  <pre class="large log row">
    <span class="value lcd">0</span>
  </pre>
</div>

Previous Next