[FEATURE] Allow using native CSS transition timing functions

[piotrjoniec]

Is your feature request related to a problem? Please describe. Currently it's not possible to pass in native CSS timing functions as strings. In my project I have a list of linear(...) CSS transitions and their cubic-bezier counterparts as a fallback - with the current API, it's not possible to use those directly.

The solution should be simple - accept a native "easing" parameter and pass it through directly to WAAPI.

Describe the solution you'd like

import { animate } from "animate/mini";

animate(
  ".box",
  { transform: "translateX(100px)" }, 
  { duration: 1, ease: { native: "steps(6, end)" } }
);

Describe alternatives you've considered The current css "linear(...)" function generator always falls back to "ease-out" if the browser doesn't support it which isn't good enough. Maybe a solution would be to be able to customize the fallback ease?

Additional context I understand this is only possible with native WAAPI animations - so this should be a part of the mini animate function.

[piotrjoniec]

I found a hack to achieve this in case someone needs this:

import { Easing, supportedWaapiEasing } from "motion";
import { animate } from "motion/mini";

Object.assign(supportedWaapiEasing, {
  "custom-ease": "linear(0 0%, 0.25 25%, 0.25 75%, 1 100%)",
});

animate(".box", { translate: "240px 0" }, { duration: 1, ease: "custom-ease" as Easing });

[mattgperry]

I’ll come back to this after a bit more thought but realistically this is unlikely as it requires a parser for the strings and then including all the easing functions in every bundle.