-
Notifications
You must be signed in to change notification settings - Fork 743
/
easing.ts
33 lines (29 loc) · 1.01 KB
/
easing.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { BezierDefinition, Easing, EasingDefinition } from "../../easing/types"
export function isWaapiSupportedEasing(easing?: Easing | Easing[]) {
return (
!easing ||
Array.isArray(easing) ||
(typeof easing === "string" && supportedWaapiEasing[easing])
)
}
export const cubicBezierAsString = ([a, b, c, d]: BezierDefinition) =>
`cubic-bezier(${a}, ${b}, ${c}, ${d})`
export const supportedWaapiEasing = {
linear: "linear",
ease: "ease",
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
}
export function mapEasingToNativeEasing(
easing?: EasingDefinition
): string | undefined {
if (!easing) return undefined
return Array.isArray(easing)
? cubicBezierAsString(easing)
: supportedWaapiEasing[easing]
}