Animate Numbers With A Rolling Effect – number-flip

Category: Animation , Javascript | April 26, 2023
Author:gaoryrt
Views Total:2,221 views
Official Page:Go to website
Last Update:April 26, 2023
License:MIT

Preview:

Animate Numbers With A Rolling Effect – number-flip

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);
    },
})

You Might Be Interested In:


Leave a Reply