Giter Site home page Giter Site logo

ezc / countup.js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from inorganik/countup.js

0.0 3.0 0.0 672 KB

Animates a numerical value by counting to it

Home Page: http://inorganik.github.io/countUp.js

License: MIT License

JavaScript 100.00%

countup.js's Introduction

countUp.js

countUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.

Despite its name, countUp can count in either direction, depending on the startVal and endVal params that you pass.

countUp.js supports all browsers.

##Try the demo

Usage:

Params:

  • target = id of html element, input, svg text element, or var of previously selected element/input where counting occurs
  • startVal = the value you want to begin at
  • endVal = the value you want to arrive at
  • decimals = number of decimal places in number, default 0
  • duration = duration in seconds, default 2
  • options = object that determines number formatting and toggles easing - see demo

Decimals, duration, and options can be left out to use the default values.

var numAnim = new countUp("SomeElementYouWantToAnimate", 24.02, 99.99);
numAnim.start();

with optional callback:

numAnim.start(someMethodToCallOnComplete);

// or an anonymous function
numAnim.start(function() {
	// do something
})

Other methods:

Stop an animation in progress:

numAnim.stop();

Resume a stopped animation:

numAnim.resume();

Reset an animation:

numAnim.reset();

countup.js's People

Contributors

inorganik avatar hhsnopek avatar lifthrasiir avatar jackrugile avatar marjan-georgiev avatar phlipper avatar irazasyed avatar thiagopintodev avatar retasretas avatar youxiachai avatar

Watchers

Stormxx avatar James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.