easing that used d3-ease.

easing_obj.js

import d3_ease from 'd3-ease';

export default class EasingObj {
  constructor($elm, max, time) {
    this.$elm = $elm;
    this.max = max;
    this.time_start = 0;
    this.time_past = 0;
    this.time_animate = time;
    this.step = 0;
  };
  init() {
    this.time_start = Date.now();
    this.time_past = Date.now();
    this.step = 0;
    this.renderLoop();
  };
  updateCss(x) {
    this.$elm.css({
      transform: `translateX(${x}px)`,
    });
  };
  render() {
    this.time_past = Date.now();
    this.step = (this.time_past - this.time_start) / this.time_animate;
    if (this.step >= 1) this.step = 1;
    this.updateCss(d3_ease.circleOut(this.step) * this.max);
  };
  renderLoop() {
    this.render();
    if (this.step < 1) {
      requestAnimationFrame(()=> {
        this.renderLoop();
      });
    }
  };
};