https://github.com/jianjroh/web-component-number-animation

https://github.com/jianjroh/web-component-number-animation

animation custom-element number-animation ui-component web-component

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jianjroh/web-component-number-animation
• Owner: JianJroh
• Created: 2023-03-05T03:02:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-28T10:06:08.000Z (over 3 years ago)
• Last Synced: 2025-09-07T02:49:00.226Z (10 months ago)
• Topics: animation, custom-element, number-animation, ui-component, web-component
• Language: TypeScript
• Homepage:
• Size: 25.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

          
# web-component-number-animation

This is a web component that allows you to create numerical animations on your website.

[![Published on npm](https://img.shields.io/npm/v/web-component-number-animation.svg?logo=npm)](https://www.npmjs.com/package/web-component-number-animation)

[![CI](https://github.com/JianJroh/web-component-number-animation/actions/workflows/ci.yml/badge.svg)](https://github.com/JianJroh/web-component-number-animation/actions/workflows/ci.yml)

## Features

- 🌀 Works with any framework or no framework at all.

- 🍃 Lightweight and easy to use. (only <2kb gzipped)

- ⚙️ Support multiple attribute configurations including digital formatting, transition duration, etc.

## Demo

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vitejs-vite-vzevlr?embed=1&file=index.html)

## Usage

### Installation

```bash

pnpm i web-component-number-animation   # or npm or yarn

```

##### Registration and Usage

```ts

import { NumberAnimation } from 'web-component-number-animation';

customElements.define('x-number-animation', NumberAnimation);

```

```html

```

### Using package via CDN

Using ES Module

```html

  import { NumberAnimation } from 'https://www.unpkg.com/web-component-number-animation/dist/number-animation.js';

  customElements.define('x-number-animation', NumberAnimation);

```

## Configurations

You can customize the behavior of the NumberAnimation component using the following props:

```ts

interface Props {

  to: number;

  from?: number;

  precision?: number;

  duration?: number;

  locale?: string;

  disabled?: boolean;

  hideSeparator?: boolean;

}

```