https://github.com/gaoryrt/number-flip
🎰 Increase your number with flipping animation
https://github.com/gaoryrt/number-flip
animation flip-animation javascript
Last synced: 22 days ago
JSON representation
🎰 Increase your number with flipping animation
- Host: GitHub
- URL: https://github.com/gaoryrt/number-flip
- Owner: gaoryrt
- License: mit
- Created: 2018-01-30T10:32:15.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-13T07:43:14.000Z (5 months ago)
- Last Synced: 2025-03-15T23:16:20.877Z (about 1 month ago)
- Topics: animation, flip-animation, javascript
- Language: TypeScript
- Homepage: https://codesandbox.io/embed/throbbing-flower-ncm0q
- Size: 741 KB
- Stars: 650
- Watchers: 10
- Forks: 60
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - gaoryrt/number-flip - 🎰 Increase your number with flipping animation (TypeScript)
- awesome - gaoryrt/number-flip - 🎰 Increase your number with flipping animation (TypeScript)
- awesome - gaoryrt/number-flip - 🎰 Increase your number with flipping animation (TypeScript)
README
# number-flip
[](https://nodei.co/npm/number-flip/)
Change number with flipping animation
[demo on codesandbox](https://codesandbox.io/embed/throbbing-flower-ncm0q)
# install
```
$ npm install --save number-flip
```
# usage
## import `number-flip`
```
import { Flip } from 'number-flip'
```
## use it!
### create one and make it flip immediately:
```js
new Flip({
node: $('.flip'),
from: 9527,
to: 42
})
```
### flip one with delay:
```js
new Flip({
node: $('.flip'),
from: 9527,
to: 42,
delay: 1 // second
})
```
### create one and flip it later:
```js
const el = new Flip({
node: $('.flip'),
from: 9527
})
el.flipTo({to: 42})
```
### customize animation duration:
```js
new Flip({
node: document.querySelector('.flip'),
from: 9527,
to: 42,
duration: 2 // second
})
```
### more complex usage
```js
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`:
```css
.number-flip { ... }
.ctnr { ... }
.digit { ... }
```
or you can rename it in config:
```js
new Flip({
containerClassName: 'c',
digitClassName: 'd',
separatorClassName: 's'
})
```
### separator:
Spearator allowed
```js
new Flip({
node: $('.flip'),
from: 95279527,
separator: ','
})
```
even more
```js
new Flip({
node: $('.flip'),
from: 95279527,
separator: ['万', '亿', '兆'],
separateEvery: 4
})
```
# syntax
```js
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](https://github.com/danro/easing-js/blob/4f5e7edbde7f7200a1baf08e357377896c0d207e/easing.js#L39-L42).
- `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
- [x] flip with FLIP
- [x] syntax
- [ ] browser compatibility list
# license
MIT
# credit
[](http://browserstack.com/)
Special thanks to [Browserstack](http://browserstack.com/) providing cross-browser testing.
# dev and build
```bash
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`