Trouble with react-countup and easingfn

Question

I'm trying to make a countuptimer (up to 2022) in React using react-countup library.

https://www.npmjs.com/package/react-countup

I can't get the timer to do a simple ease-in at the last few numbers. Any help is greatly appreciated. Here is my code:

import React from "react";
import CountUp from "react-countup";

function TimelineCounter() {
    const easingFn = (t, b, c, d) => {
        const ts = (t /= d) * t;
        const tc = ts * t;
        return b + c * (tc + -3 * ts + 3 * t);
      };

  return (
    <div class="flex items-center justify-center h-screen">
      <div class="text-9xl">
        <CountUp start={2003} end={2022} duration="5" easingFn={easingFn} />
      </div>
    </div>
  );
}

export default TimelineCounter;

Answer 1

easingFn is a function that specifies the rate of change over time. You can check possible function implementations on this page https://easings.net/. What you probably want to implement is a cubic or quint (more aggressive ramp up) functions. Here are a few examples:

• ease out cubic (t, b, c, d) => c*((t=t/d-1)*t*t + 1) + b;
• ease out quint (t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b;