All files / src/animation/utils is-animatable.ts

100% Statements 10/10
100% Branches 11/11
100% Functions 1/1
100% Lines 7/7

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 30 31 32  43x                     43x   676x         674x   44x         39x     5x    
import { ResolvedValueTarget } from "../../types"
import { complex } from "style-value-types"
 
/**
 * Check if a value is animatable. Examples:
 *
 * ✅: 100, "100px", "#fff"
 * ❌: "block", "url(2.jpg)"
 * @param value
 *
 * @internal
 */
export const isAnimatable = (key: string, value: ResolvedValueTarget) => {
    // If the list of keys tat might be non-animatable grows, replace with Set
    if (key === "zIndex") return false
 
    // If it's a number or a keyframes array, we can animate it. We might at some point
    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
    // but for now lets leave it like this for performance reasons
    if (typeof value === "number" || Array.isArray(value)) return true
 
    if (
        typeof value === "string" && // It's animatable if we have a string
        complex.test(value) && // And it contains numbers and/or colors
        !value.startsWith("url(") // Unless it starts with "url("
    ) {
        return true
    }
 
    return false
}