Change number with flipping animation

demo on codepen

$ npm install --save number-flip

import { Flip } from 'number-flip'

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

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

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

el.flipTo({to: 42})

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

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: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})

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 { ... }

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

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

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.

instanceOptions

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

• flip with FLIP
• syntax
• browser compatibility list

MIT

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