react animation number transition Kalena Date transition easeInOutQuad for kalena.app https://blog.kalena.app/day-7/

useAnimation.js

import {useState} from 'react'


// https://gist.github.com/gre/1650294
export const EasingFunctions = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t*t },
  // decelerating to zero velocity
  easeOutQuad: function (t) { return t*(2-t) },
  // acceleration until halfway, then deceleration
  easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
  // accelerating from zero velocity 
  easeInCubic: function (t) { return t*t*t },
  // decelerating to zero velocity 
  easeOutCubic: function (t) { return (--t)*t*t+1 },
  // acceleration until halfway, then deceleration 
  easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
  // accelerating from zero velocity 
  easeInQuart: function (t) { return t*t*t*t },
  // decelerating to zero velocity 
  easeOutQuart: function (t) { return 1-(--t)*t*t*t },
  // acceleration until halfway, then deceleration
  easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
  // accelerating from zero velocity
  easeInQuint: function (t) { return t*t*t*t*t },
  // decelerating to zero velocity
  easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
  // acceleration until halfway, then deceleration 
  easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
}

export const useTimer = () => {
    const [progress,setProgress] = useState(0);

    function start(duration = 500){
        var startAt = new Date()
        function frame() {
            let progress = (new Date() - startAt) / duration
            if(progress >=1)  {
                setProgress(1)
                return
            }
            setProgress(progress)
            requestAnimationFrame(frame)
        }

        requestAnimationFrame(frame)
    }
    return [progress, start ]
}


export const useAnimationFunction = (fn = EasingFunctions['easeInOutQuad']) => {
    const [progress, start] = useTimer()
    return [fn(progress), start]
}

export const useAnimatedValue = (initial, duration = 1000) => {
    let [animation, setAnimation] = useState({from: initial*1, to:initial*1});
    let [progress, start] = useAnimationFunction()

    let value = animation.from + (animation.to - animation.from) * progress;

    function Start(newValue) {
        setAnimation({from: value * 1,to: newValue * 1})
        start( duration)
    }
    
    return [value, Start]
}

export const useAnimatedVector = (initialRange,duration = 1000) => {
    let [animation, setAnimation] = useState({from: initialRange, to:initialRange});
    let [progress, start] = useAnimationFunction()


    function Start(newRange) {
        setAnimation({from: value ,to: newRange})
        start(duration)
    }

    let value = animation.from.map((from,index)=>{
        let to = animation.to[index]
        return from + (to - from) * progress;
    })
    
    return [value, Start]
}

export const useAnimatedDateVector = (initialRange,duration=1000) => {
    let [range,start] = useAnimatedVector(initialRange.map((date)=>(date.getTime())), duration);

    let dateRange = range.map((time) => new Date(time));
    function startDate(newDateRange) {
        let range = newDateRange.map( (date) => (date.getTime()) );
        start(range);
    }
    return [dateRange,startDate];
}