Convert CSS cubic-bezier timing value to d3 custom ease

Help
5

You import the offset helper:

import {weightedOffset} from 'https://observablehq.com/@mootari/stitched-easings'

then create your own easing function. Here is an (unoptimized) example that you can experiment with:

function myEase(t) {
  const mix = (a, b, t) => a * (1 - t) + b * t;
  const steps = [
    // We use mix() here to scale and offset each ease vertically.
    [.3, t => mix(0, .5, d3.easeCubicIn(t))],
    [.7, t => mix(.5, 1, d3.easeBounceInOut(t))],
  ];
  const weights = steps.map(s => s[0]);
  const eases = steps.map(s => s[1]);
  
  const [i, tLocal] = weightedOffset(t, weights);
  return eases[i](tLocal);
}

If you plot it:

Plot.line(
  d3.range(0, 1, .01).map(t => ({t, v: myEase(t)})),
  {x: 't', y: 'v'}
).plot({y: {domain: [0, 1]}})

it produces the following output:

image
image1302×810 25.2 KB