npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

number-flip

v1.2.3

Published

Change number with flipping animation

Downloads

1,176

Readme

number-flip

NPM

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.
  • seperateOnly: A number representing the only separator, defaults 0.
  • separateEvery: The number per digit separator would add to, defaults 3, won't work if seperateOnly 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

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