motioncounter v1.0.0-beta.2

MotionCounter

MotionCounter is a React component library for animated counters.

Installation

Install via npm:

npm install motioncounter

Usage

import { Counter } from "motioncounter";

For more examples cf. demo folder: https://github.com/YTDev/MotionCounter

Props

• from (number): Initial value (default: 0)
• to (number): Target value (required)
• type (string): Animation type ("spring" or "tween", default: "spring")
• springOptions (object): Options for spring animation (e.g., damping, stiffness)
• tweenOptions (object): Options for tween animation (e.g., duration, easing)
• formatter (function): Function to format the displayed value (default: (value) => value.toFixed(0))
• inViewOptions (object): Options for the Intersection Observer (default: { once: true })
• onAnimationStart (function): Callback fired when the animation starts

note: tweenOptions only make sense if type is tween (same for type spring)

See Demos: https://motioncounter.netlify.app/