number-flip

Change number with flipping animation

demo on codesandbox

install

$ npm install --save number-flip

usage

import number-flip

import { Flip } from 'number-flip'

use it!

create one and make it flip immediately:

new Flip({
  node: $('.flip'),
  from: 9527,
  to: 42
})

flip one with delay:

new Flip({
  node: $('.flip'),
  from: 9527,
  to: 42,
  delay: 1 // second
})

create one and flip it later:

const el = new Flip({
  node: $('.flip'),
  from: 9527
})

el.flipTo({to: 42})

customize animation duration:

new Flip({
  node: document.querySelector('.flip'),
  from: 9527,
  to: 42,
  duration: 2 // second
})

more complex usage

new Flip({
  node: document.querySelector('.flip'),
  from: 73,
  to: 25,
  duration: 2,
  delay: 1,
  easeFn: function(pos) {
    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
    return 0.5 * (Math.pow((pos-2),3) + 2);
  },
  // for more easing function, see https://github.com/danro/easing-js/blob/master/easing.js
  systemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})

CSS customizable:

HTML structure of a 3-digits flip would be like:

.number-flip
    .ctnr.ctnr0
        .digit*10
    .ctnr.ctnr1
        .digit*10
    .ctnr.ctnr2
        .digit*10

The height / width of .number-flip is based on the height / width of .digit, you can customize the size by changing the css of .digit:

  .number-flip { ... }
  .ctnr { ... }
  .digit { ... }

or you can rename it in config:

new Flip({
  containerClassName: 'c',
  digitClassName: 'd',
  separatorClassName: 's'
})

separator:

Spearator allowed

new Flip({
  node: $('.flip'),
  from: 95279527,
  separator: ','
})

even more

new Flip({
  node: $('.flip'),
  from: 95279527,
  separator: ['万', '亿', '兆'],
  separateEvery: 4
})

syntax

var flipInstance = new Flip(options)
flipInstance.flipTo(instanceOptions)

return value

The returned Flip instance has a function called flipTo.
flipTo takes one instanceOptions, so you can start the flip animation whenever you want.

parameter

options

• node: An Element object representing the animation container. Make sure this element is already existed in the DOM when you new the instance.
• from: The number that animation starts from. Optional if you want to flip with 0. Expected a positive integer.
• to: The number that animation rolls to. Optional if you want to start manually. Expected a positive integer.
• duration optional: The animation duration in seconds. If not specified, duration defaults to 0.5 second.
• delay optional: The delay of animation in seconds. If not specified, there's no delay.
• easeFn optional: A easing function to be executed. If not specified, easeFn defaults easeInOutCubic.
• systemArr optional: An array ten-lengthed, representing the content of each decimal rolling system. If not specified, systemArr defaults to [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ].
• direct optional: A boolean representing if the number would rolling directly or one by one. For example, from 0 to 99, the ones place would pass 9 digits if is direct. Or if is not directly, would pass 99 digits, 9 rounds for each of the tens place. If not specified, direct defaults true.
• separator: A string / array representing the separator, defaults off. Could set to a string or an array-of-string.
• separateOnly: A number representing the only separator， defaults 0.
• separateEvery: The number per digit separator would add to, defaults 3, won't work if separateOnly has been set.

instanceOptions

• to: Same as options.to.
• duration optional: Same as options.duration.
• easeFn optional: Same as options.easeFn.
• direct optional: Same as options.direct.

TODO

• flip with FLIP
• syntax
• browser compatibility list

license

MIT

credit

Special thanks to Browserstack providing cross-browser testing.

dev and build

yarn dev
yarn build

contributing

1. fork this repo
2. git checkout -b NEW-FEATURE
3. git commit -am 'ADD SOME FEATURE'
4. git push origin NEW-FEATURE