How to use d3-ease - 10 common examples

.tickSize(width - margin.left - margin.right);

    barChartSVG.select('.gridlines').call(gridlines);

    // render the bars
    const bars = barsContainer.selectAll('.bar').data(parsedCounters, c => +c.start_time);

    const barsEnter = bars
      .enter()
      .append('rect')
      .attr('class', 'bar');

    const t = d3Transition
      .transition()
      .duration(DURATION)
      .ease(d3Ease.easeQuad);

    bars
      .merge(barsEnter)
      .attr('x', counter => xScale(counter.start_time))
      // set the initial y value to 0 so the bars animate upwards
      .attr('y', () => yScale(0))
      .attr('width', xScale.bandwidth())
      .transition(t)
      .delay(function(d, i) {
        return i * BASE_SPEED;
      })
      .attr('height', counter => height - yScale(counter.total))
      .attr('y', counter => yScale(counter.total));

    bars.exit().remove();

hoverColor: config.hoverColor === void 0 ? revealConfig.hoverColor : config.hoverColor,
        zIndex: config.zIndex === void 0 ? revealConfig.zIndex : config.zIndex,
        borderColor: config.borderColor === void 0 ? revealConfig.borderColor : config.borderColor
    } as Required;

    const newTinyColor = tinyColor(newConfig.hoverColor);
    const hsla = newTinyColor.toHsl();
    const hslaColor = newTinyColor.toHslString();
    let storeColor = colorMap.get(hslaColor) as ColorStore;

    if (!storeColor) {
        const gradient = revealStore.hoverCtx.createRadialGradient(0, 0, 0, 0, 0, 1);
        const step = 0.01;
        for (let x = 1; x > 0; x -= step) {
            // let alpha = easing.easeCubicIn(x);
            let alpha = easing.easeCubicInOut(x);
            gradient.addColorStop(x / 2, `hsla(${hsla.h}, ${hsla.h * 100}%, ${hsla.l * 100}%, ${(1 - alpha) * hsla.a})`);
        }
        const borderColor = tinyColor({
            h: hsla.h,
            s: hsla.s,
            l: hsla.l,
            a: 1
        }).toHslString();
        storeColor = { gradient, borderColor };
        colorMap.set(hslaColor, storeColor);
    }

    newConfig.hoverGradient = storeColor.gradient;
    if (!newConfig.borderColor) {
        newConfig.borderColor = storeColor.borderColor;
    }

eases.forEach(function (e) {
      // convert to camelCase
      var easeName = e.replace(/-([a-z])/g, function (g) {
        return g[1].toUpperCase();
      });

      // add instance methods dynamically
      _this[easeName] = function (prop, end, duration) {
        return this.animate(prop, end, duration, easeName);
      };

      Easing[easeName] = ease(e);
    });
  }

eases.forEach( (e) => {
            // convert to camelCase
            var easeName = e.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });

            // add instance methods dynamically
            this[easeName] = function(prop, end, duration) {
                return this.animate(prop, end, duration, easeName)
            }

            Easing[easeName] = ease(e)

        });
    }

(isFlying
        ? isSpectator
          ? SPECTATOR_INERTIA
          : INERTIA
        : (isOnGround ? FRIC_INERTIA : IN_AIR_INERTIA) /
          (isSprinting ? SPRINT_FACTOR : 1)) *
      delta

    if (this.needsToJump) {
      this.jumping = true
      this.currJumpTime = JUMP_TIME
      this.needsToJump = false
    }

    if (this.currJumpTime > 0 && this.jumping) {
      const jf = easeQuadOut(this.currJumpTime / JUMP_TIME) * JUMP_FORCE
      this.acc.y += jf // !?????
      this.currJumpTime -= delta * 1000
    }

    if (this.currJumpTime <= 0) {
      this.jumping = false
      this.currJumpTime = 0
    }

    this.vel.add(this.acc)
    this.acc.set(0.0, 0.0, 0.0)

    if (shouldGravity && !this.freshlyJumped) this.vel.y += GRAVITY

    this.vel.multiplyScalar(delta)

import * as d3Ease from 'd3-ease';

let t_in: number = 0.5;
let t_out: number;

t_out = d3Ease.easeLinear(t_in);

t_out = d3Ease.easeQuad(t_in);
t_out = d3Ease.easeQuadIn(t_in);
t_out = d3Ease.easeQuadOut(t_in);
t_out = d3Ease.easeQuadInOut(t_in);

t_out = d3Ease.easeCubic(t_in);
t_out = d3Ease.easeCubicIn(t_in);
t_out = d3Ease.easeCubicOut(t_in);
t_out = d3Ease.easeCubicInOut(t_in);


let easePolyFactory: d3Ease.PolynomialEasingFactory;

easePolyFactory = d3Ease.easePoly;
easePolyFactory = d3Ease.easePoly.exponent(2);
t_out = easePolyFactory(t_in);

easePolyFactory = d3Ease.easePolyIn;
easePolyFactory = d3Ease.easePolyIn.exponent(2);
t_out = easePolyFactory(t_in);

easePolyFactory = d3Ease.easePolyOut;
easePolyFactory = d3Ease.easePolyOut.exponent(2);
t_out = easePolyFactory(t_in);

import * as d3Ease from 'd3-ease';

let t_in: number = 0.5;
let t_out: number;

t_out = d3Ease.easeLinear(t_in);

t_out = d3Ease.easeQuad(t_in);
t_out = d3Ease.easeQuadIn(t_in);
t_out = d3Ease.easeQuadOut(t_in);
t_out = d3Ease.easeQuadInOut(t_in);

t_out = d3Ease.easeCubic(t_in);
t_out = d3Ease.easeCubicIn(t_in);
t_out = d3Ease.easeCubicOut(t_in);
t_out = d3Ease.easeCubicInOut(t_in);


let easePolyFactory: d3Ease.PolynomialEasingFactory;

easePolyFactory = d3Ease.easePoly;
easePolyFactory = d3Ease.easePoly.exponent(2);
t_out = easePolyFactory(t_in);

easePolyFactory = d3Ease.easePolyIn;
easePolyFactory = d3Ease.easePolyIn.exponent(2);
t_out = easePolyFactory(t_in);

easePolyFactory = d3Ease.easePolyOut;
easePolyFactory = d3Ease.easePolyOut.exponent(2);
t_out = easePolyFactory(t_in);

/**
 * Typescript definition tests for d3/d3-ease module
 *
 * Note: These tests are intended to test the definitions only
 * in the sense of typing and call signature consistency. They
 * are not intended as functional tests.
 */

import * as d3Ease from 'd3-ease';

let t_in: number = 0.5;
let t_out: number;

t_out = d3Ease.easeLinear(t_in);

t_out = d3Ease.easeQuad(t_in);
t_out = d3Ease.easeQuadIn(t_in);
t_out = d3Ease.easeQuadOut(t_in);
t_out = d3Ease.easeQuadInOut(t_in);

t_out = d3Ease.easeCubic(t_in);
t_out = d3Ease.easeCubicIn(t_in);
t_out = d3Ease.easeCubicOut(t_in);
t_out = d3Ease.easeCubicInOut(t_in);


let easePolyFactory: d3Ease.PolynomialEasingFactory;

easePolyFactory = d3Ease.easePoly;
easePolyFactory = d3Ease.easePoly.exponent(2);
t_out = easePolyFactory(t_in);

easeBackFactory = d3Ease.easeBackIn;
easeBackFactory = d3Ease.easeBackIn.overshoot(2);
t_out = easeBackFactory(t_in);

easeBackFactory = d3Ease.easeBackOut;
easeBackFactory = d3Ease.easeBackOut.overshoot(2);
t_out = easeBackFactory(t_in);

easeBackFactory = d3Ease.easeBackInOut;
easeBackFactory = d3Ease.easeBackInOut.overshoot(2);
t_out = easeBackFactory(t_in);

let easeElasticFactory: d3Ease.ElasticEasingFactory;

easeElasticFactory = d3Ease.easeElastic;
easeElasticFactory = d3Ease.easeElastic.amplitude(1.5);
easeElasticFactory = d3Ease.easeElastic.period(0.4);
t_out = easeElasticFactory(t_in);

easeElasticFactory = d3Ease.easeElasticIn;
easeElasticFactory = d3Ease.easeElasticIn.amplitude(1.5);
easeElasticFactory = d3Ease.easeElasticIn.period(0.4);
t_out = easeElasticFactory(t_in);

easeElasticFactory = d3Ease.easeElasticOut;
easeElasticFactory = d3Ease.easeElasticOut.amplitude(1.5);
easeElasticFactory = d3Ease.easeElasticOut.period(0.4);
t_out = easeElasticFactory(t_in);

easeElasticFactory = d3Ease.easeElasticInOut;
easeElasticFactory = d3Ease.easeElasticInOut.amplitude(1.5);
easeElasticFactory = d3Ease.easeElasticInOut.period(0.4);

easeBackFactory = d3Ease.easeBackIn;
easeBackFactory = d3Ease.easeBackIn.overshoot(2);
t_out = easeBackFactory(t_in);

easeBackFactory = d3Ease.easeBackOut;
easeBackFactory = d3Ease.easeBackOut.overshoot(2);
t_out = easeBackFactory(t_in);

easeBackFactory = d3Ease.easeBackInOut;
easeBackFactory = d3Ease.easeBackInOut.overshoot(2);
t_out = easeBackFactory(t_in);

let easeElasticFactory: d3Ease.ElasticEasingFactory;

easeElasticFactory = d3Ease.easeElastic;
easeElasticFactory = d3Ease.easeElastic.amplitude(1.5);
easeElasticFactory = d3Ease.easeElastic.period(0.4);
t_out = easeElasticFactory(t_in);

easeElasticFactory = d3Ease.easeElasticIn;
easeElasticFactory = d3Ease.easeElasticIn.amplitude(1.5);
easeElasticFactory = d3Ease.easeElasticIn.period(0.4);
t_out = easeElasticFactory(t_in);

easeElasticFactory = d3Ease.easeElasticOut;
easeElasticFactory = d3Ease.easeElasticOut.amplitude(1.5);
easeElasticFactory = d3Ease.easeElasticOut.period(0.4);
t_out = easeElasticFactory(t_in);

easeElasticFactory = d3Ease.easeElasticInOut;
easeElasticFactory = d3Ease.easeElasticInOut.amplitude(1.5);