A simple utility to animate a single number. The number changes on each frame (by requestAnimationFrame).
For more complex cases, you can take a look at the shifty. The package can animate a few fields and control the animation timelines.
🤯 Demo
animate
works with requestAnimationFrame
and changes the number on each frame.
import { animate } from 'gitart-animate-number'
const stopFn = animate({
from: 0,
to: 500,
duration: 1000,
on: (value) => {
console.log('value: ', value)
},
}
// stop animation if needed
stopFn()
animateUsingInterval
works with setInterval
and changes the number on each interval. Specify the interval by fps
option.
import { animateUsingInterval } from 'gitart-animate-number'
const stopFn = animate({
from: 0,
to: 500,
duration: 1000,
fps: 60,
on: (value) => {
console.log('value: ', value)
},
}
You can specify bezier
options by yourselft or use the easingTypes
.
There is this types of easing:
type EasingTypes = 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'linear' | 'default'
Usage:
import { animate, easingTypes } from 'gitart-animate-number'
const stopFn = animate({
from: 0,
to: 500,
duration: 1000,
easing: easingTypes.easeInOut, // the same like [0.42, 0, 0.58, 1]
on: (value) => {
console.log('value: ', value)
},
}
animate
works with requestAnimationFrame
and changes the number on each frame.
perfect for browser environment.
type AnimateFn = (
params: IParams,
) => StopAnimationFn
interface IParams {
/**
* start value
*/
from: number
/**
* end value
*/
to: number
/**
* milliseconds
*/
duration: number
/**
* bezier curve parameters
*/
bezier?: BezierParams
/**
* a callback called many times (on requestAnimationFrame) until the animation is complete.
* the current progress is passed as the first parameter.
*/
on: (value: CurrentValue) => void
/**
* is called when the animation is stopped manually.
* @param value - last value passed to `on` callback
*/
stopped?: (value: CurrentValue) => void
/**
* is called when the animation is completed.
* @param value - equal to the `to` parameter of the function. the final value
*/
completed?: (value: CurrentValue) => void
/**
* is called when the animation is completed or stopped.
* @param value - last value passed to `on` callback
*/
done?: (value: CurrentValue) => void
}
animateUsingInterval
works with setInterval
and changes the number on each interval. To specify the interval, use the fps
option.
type AnimateByIntervalFn = (
params: IParams,
) => StopAnimationFn
interface IAnimateByIntervalParams extends IParams {
/**
* frames per second
* default: 60
* @example 10 means that the animation will be updated 10 times per second
*/
fps?: number
}