All files / easing utils.ts

100% Statements 16/16
75% Branches 3/4
100% Functions 10/10
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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)))
}