TODO: README

Getting Started

• Basic Use

<div id='app' />

import NumberFrame from '@hansuhhi-don/number-frame';

const numberFrame = new NumberFrame({
  from: -200,
  to: 2022,
  duration: 4044,
  element: document.getElementById("app"),
});

setTimeout(() => {
    numberFrame.start();
}, 1000);

When you open the page some changes have happened.

• Vue

import { NumberFrame } from "@hansuhhi-don/number-frame";
import { defineComponent, onMounted, ref } from "vue";

const nf = new NumberFrame({
  from: 0,
  to: 2022,
  duration: 2000,
});

export default defineComponent({
  setup: () => {
    const num = ref(0);

    onMounted(() => {
      nf.start(() => (num.value = nf.number));
    });
    return () => {
      return <p>{num.value}</p>;
    };
  },
});

When you open the page some changes have happened.

API

• NumberFrame

class

key	type	description
start	(cb: Function) => void	Start changing numbers as expected cb will be called every time
value	Number	Number in a frame.

• NumberFrameProps

constructor

key	type	description
from	? Number(default: 0)	Starting number
to	Number	End number
duration	? Number(default: 1000)	Total time(ms)
element	? HTMLElement	If you have an html element, numbers will autoplay in this element