Animate Numbers With A Rolling Effect – number-flip

Preview:

Description:

number-flip is a JavaScript library to animate numbers (or any other characters) with an engaging rolling effect.

Ideal for countdown timers, visitor counters, visual slot machines, and any case where you want to animate increasing/decreasing numbers.

How to use it:

1. Install and import the number-flip as a module.

# NPM
$ npm i number-flip

import { Flip } from 'number-flip'

2. Create a new Flip instance and specify the from/to numbers.

new Flip({
    node: $('.myElement'),
    from: 1234,
    to: 0
})

3. Set the delay & duration of the rolling effect.

new Flip({
    node: $('.flip'),
    from: 1234,
    to: 0,
    duration: 3 // in seconds
    delay: 1, // in seconds
})

4. Determine whether to roll the characters one by one. Default: false.

new Flip({
    node: $('.flip'),
    from: 1234,
    to: 0,
    direct: true,
})

5. This example shows how to create slot machines by using the separator parameter.

const slot = new Flip({
      node: $(".slot"),
      from: 777,
      systemArr: ["🍒", "🍏", "🍍", "🌴", "bar", "🔔", "🍇", "7", "💰", "🍈", "bar"],
      seperateOnly: 0,
      separateEvery: 3,
});
slot.flipTo({
  to: ~~(Math.random() * 999)
});

6. Apply a custom easing function.

new Flip({
    node: $('.myElement'),
    from: 1234,
    to: 0,
    easeFn: function(pos) {
      if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
      return 0.5 * (Math.pow((pos-2),3) + 2);
    },
})