THEMETRIAL

Customizable Count Up/Down Animations In Pure JavaScript – CountUp.js

Author: inorganik
Views Total: 14 views
Official Page: Go to website
Last Update: August 8, 2020
License: MIT

Preview:

Customizable Count Up/Down Animations In Pure JavaScript – CountUp.js

Description:

CountUp.js is a lightweight, simple-to-use JavaScript library that allows to animates countups and countdowns with custom easings , separators, decimals, suffixes and prefixes. Also available as Angular 1.x / 2.x directives and a WordPress plugin.

How to use it:

Import the CountUp.js library into your web project.

# NPM
npm install countup.js

# Bower
bower install countup.js
<script src="https://www.cssscript.com/countUp.js"></script>

Create a new countup object and specify the target element and start/end numeric values.

var myDemo = new CountUp("yourElement", 22, 99.99);

Start the animation.

myDemo.start();

Pause & resume the animation.

myDemo.pauseResume();

Reset the animation.

myDemo.reset();

Update the numeric value.

var newValue = 1999;
myDemo.update(newValue);

Possible options with default values.

var myDemo = new CountUp("yourElement", 22, 99.99,{

    // start value
    startVal: 0,

    // number of decimal places
    decimalPlaces: 0,

    // duration in seconds
    duration: 2,

    // smooth easing for large numbers above this if useEasing
    smartEasingThreshold: 999,

    // amount to be eased for numbers above threshold
    smartEasingAmount: 333,
 
    // toggle easing
    useEasing : true, 

    // 1,000,000 vs 1000000
    useGrouping : true, 

    // character to use as a separator
    separator : ',', 

    // character to use as a decimal
    decimal : '.', 

    // optional custom easing closure function, default is Robert Penner's easeOutExpo
    easingFn: null, 

    // optional custom formatting function, default is self.formatNumber below
    formattingFn: null,

    // optional text before the result
    prefix: '', 

    // optional text after the result
    suffix: '', 

    // optionally pass an array of custom numerals for 0-9
    numerals: []
    
});

Changelog:

v2.0.6 (08/08/2020)

  • allow certain options to be changed after instantiation
  • UMD module now included

v2.0.4 (06/20/2019)

v1.9.3 (09/21/2018)


Source link

Add comment

CATEGORIES

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.