-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathease.ts
More file actions
66 lines (58 loc) · 1.87 KB
/
ease.ts
File metadata and controls
66 lines (58 loc) · 1.87 KB
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// Power1: Quad
export const Power1: Power = {
in: (t) => t * t,
out: (t) => t * (2 - t),
inOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
}
// Power2: Cubic
export const Power2: Power = {
in: (t) => t * t * t,
out: (t) => 1 - Math.pow(1 - t, 3),
inOut: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
}
// Power3: Quart
export const Power3: Power = {
in: (t) => t * t * t * t,
out: (t) => 1 - Math.pow(1 - t, 4),
inOut: (t) => (t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2),
}
// Power4: Quint
export const Power4: Power = {
in: (t) => t * t * t * t * t,
out: (t) => 1 - Math.pow(1 - t, 5),
inOut: (t) => (t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2),
}
// Expo
export const Expo: Power = {
in: (t) => (t === 0 ? 0 : Math.pow(2, 10 * (t - 1))),
out: (t) => (t === 1 ? 1 : -Math.pow(2, -10 * t) + 1),
inOut: (t) => {
if (t === 0) return 0
if (t === 1) return 1
if ((t /= 0.5) < 1) return 0.5 * Math.pow(2, 10 * (t - 1))
return 0.5 * (-Math.pow(2, -10 * --t) + 2)
},
}
export const Linear: EaseFn = (t) => t
/**
* Adaptor for gsap ease functions as string
*/
export type EaseType = "power1" | "power2" | "power3" | "power4" | "expo"
export type EaseDirection = "in" | "out" | "inOut"
export type EaseName = `${EaseType}.${EaseDirection}` | "linear" | "none"
export type EaseFn = (t: number) => number
export type Ease = EaseName | EaseFn
export type Power = Record<string, EaseFn>
// Created once outside of the easeAdapter function
const _EASE_MAP: Record<string, Power | EaseFn> = {
linear: Linear,
power1: Power1,
power2: Power2,
power3: Power3,
power4: Power4,
expo: Expo,
}
export const easeAdapter = (ease: EaseName): EaseFn => {
const [type, direction] = ease.split(".") as [EaseType, EaseDirection]
return (_EASE_MAP[type] as Power)?.[direction] ?? Linear
}