Transition Values Using Easing Functions – react-transition-value

Description:

Number values are often used as backgrounds for elements on a web page. They are also commonly used to number tabs, bullets or nav bar items, text inputs, and list elements.

This component offers a simple way to transition between two number values using easing functions.

Easing functions are sometimes called ease-in, ease-out, and linear, etc. depending on what you have seen in the past.

How to use it:

1. Install and import the react-transition-value component.

# Yarn
$ yarn add react-transition-value
# NPM
$ npm i react-transition-value

import { useTransitionValue } from 'react-transition-value'

2. Transition between two numbers (from 0 to 10000).

const AnimateValue = () => {
  const [transitionValue, setTransitionValue] = useTransitionValue(0)
  return <button onClick={() => setTransitionValue(10000)}>
    {transitionValue}
  </button>
}

3. Available options and callbacks.

setTransitionValue(fromValue, {
  from: number,
  to: number,
  duration: number,
  autoStart: boolean,
  easing: Function,
  onDone: Function,
  onStep: Function,
})

Preview: