number-flip-animation

This package makes it easy to transition between to numbers using a flip/slide animation. The new number being changed to does not need to have the same number of digits as the number being changed from. Leading zeros are not being used.

Installation

npm install number-flip-animation

Basic usage

Import the module and the css file

import { NumberFlip } from 'number-flip-animation';
import 'number-flip-animation/dist/styles.css';

Create a new class instance and provide an HTMLElement.

const numberFlip = new NumberFlip({
  rootElement: document.getElementById('number-flip'),
});

To set a number or change the current number, call setNumberTo on the instance

numberFlip.setNumberTo({
  newNumber: 123,
});

Options

• rootElement: An HTMLElement Object used to inject the necessary html nodes.
• newNumber: The number that should be changed to.
• durationFlip: The duration in milliseconds of the flip/slide transition
• durationOpacity: The duration in milliseconds of the fade out transition
• clearRootElement: Whether the child elements of the rootElement should be deleted
• elements: An HTMLCollection or NodeList of elements that should be changed (Only used in setNumberForElements)
• attributeName: The name of the data attribute that should be used to get the number from the element (Only used in setNumberForElements)

Methods

The NumberFlip class accepts options through the constructor and two public methods.

Constructor

const numberFlip = new NumberFlip({
  rootElement: document.getElementById('number-flip'),
  newNumber: 123,
  durationFlip: 1000,
  durationOpacity: 200,
  clearRootElement: false,
});

setNumberTo

numberFlip.setNumberTo({
  rootElement: document.getElementById('number-flip'),
  newNumber: 123,
  durationFlip: 1000,
  durationOpacity: 200,
  clearRootElement: false,
});

setNumberForElements

numberFlip.setNumberForElements({
  elements: document.getElementsByClassName('number-flip'),
  attributeName: 'data-number',
  durationFlip: 1000,
  durationOpacity: 200,
  clearRootElement: false,
});

Limitations

• Currently it is not possible to display negative numbers (Due to the lack of a leading minus sign).
• A thousand delimiter is not shown.
• Only whole numbers can be displayed.

License

MIT