FirstDevKit

English Deutsch

SmoothCounter

Version: v1.0.6 [2024-11-25]

This text contains a dynamic counter: .

SmoothCounter Documentation

Problem Statement

Dynamic numbers with style and flexibility.

Many plugins animate numbers, but they lack flexibility, dynamic formatting, and a seamless design for integrating counters into your website. SmoothCounter provides an elegant, customizable solution for animating numbers. Whether you're building statistics, real-time dashboards, or interactive user interfaces, SmoothCounter ensures your numbers are dynamic, visually appealing, and displayed exactly when they matter most.

Key Features

  • Dynamic Animation:
    Smoothly transitions numbers from a starting value to an end value over a specified duration.

  • Custom Formatting:
    Supports Intl.NumberFormat for highly customizable number formats, such as currency, percentages, or localized formats.

  • Color Control:
    Set specific colors for positive, negative, or zero values, or let them inherit from the parent element.

  • Starts Only When Visible:
    Animations begin when the counter is visible on the screen, ensuring the animation happens when it’s most impactful to the user.

  • Callback Support:
    Specify a callback function to execute after the animation completes.

  • Lightweight and Easy to Use:
    No dependencies, simple integration, and responsive scaling ensure a seamless experience on all devices.

Usage

Integration

  1. Include the JavaScript file in your project:

    <script src="SmoothCounter/SmoothCounter.js"></script>

  2. Add a container to your HTML:

    <p>
    This text contains a dynamic counter: <span id="inline-counter"></span>.
</p>

  3. Initialize SmoothCounter in your JavaScript:

    SmoothCounter("#inline-counter", {
    start: 0,                 // Starting value
    end: 1000,                // Ending value
    duration: 3000,           // Duration in milliseconds
    formatter: new Intl.NumberFormat('en-US', { style: 'decimal' }),
    positiveColor: "green",
    negativeColor: "red",
    zeroColor: null,
    onComplete: () => console.log("Counter completed!")
});

Customization Options

Option Type Default Value Description
start number 0 Starting value for the counter.
end number 100 Ending value for the counter.
duration number 3000 Animation duration in milliseconds.
formatter object Intl.NumberFormat Formatter object for customizing number formats.
positiveColor string null (inherits parent) Color for positive numbers.
negativeColor string null (inherits parent) Color for negative numbers.
zeroColor string null (inherits parent) Color for zero.
startOnVisible boolean true Animations start when the counter becomes visible.
onComplete function () => {} Callback function executed when the animation completes.

Features Highlight

  1. Visually Timed Animations:
    The counter animation starts only when it’s visible, making it most impactful and relevant for the user.

  2. Highly Customizable:
    Control formatting, colors, and more with intuitive options.

  3. Responsive and Lightweight:
    SmoothCounter adapts seamlessly to different devices and environments.

  4. Intuitive Design:
    Perfect for dashboards, statistics, or anywhere dynamic numbers make an impact.

Conclusion

SmoothCounter combines elegance and functionality to create engaging and relevant number animations. The animation only starts when it becomes visible – a feature that ensures users notice the animation exactly when it matters most.