All files / easing utils.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
 
 
 
 
30x
 
 
 
23x
20x
 
 
 
52x
 
 
20x
6x
 
 
 
7x
10x
10x
3x
 
 
 
 
import { Easing, EasingModifier } from "./types"
 
// Accepts an easing function and returns a new one that outputs reversed values.
// Turns easeIn into easeOut.
export const reverseEasing: EasingModifier = easing => p => 1 - easing(1 - p)
 
// Accepts an easing function and returns a new one that outputs mirrored values for
// the second half of the animation. Turns easeIn into easeInOut.
export const mirrorEasing: EasingModifier = easing => p =>
    p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2
 
// Creates an easing function that is based on the exponent of the provided `power`.
// The higher the `power`, the stronger the easing.
export const createExpoIn = (power: number): Easing => p => p ** power
 
// Creates an easing function that has a stronger overshoot the higher the provided `power`.
export const createBackIn = (power: number): Easing => p =>
    p * p * ((power + 1) * p - power)
 
// Creates an easing function that pulls back a little before moving, and then
// has a `createBackIn`-based overshoot
export const createAnticipate = (power: number): Easing => {
    const backEasing = createBackIn(power)
    return p =>
        (p *= 2) < 1
            ? 0.5 * backEasing(p)
            : 0.5 * (2 - Math.pow(2, -10 * (p - 1)))
}