How to use the stylefire.isTransformProp function in stylefire

To help you get started, we’ve selected a few stylefire examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github framer / motion / src / motion / utils / use-styles.ts View on Github external
values: MotionValuesMap,
    styleProp: MotionStyle = {},
    transformValues?: (values: V) => V
): CSSProperties => {
    const style = useRef({}).current
    const prevMotionStyles = useRef({}).current
    const currentStyleKeys = new Set(Object.keys(style))

    for (const key in styleProp) {
        currentStyleKeys.delete(key)
        const thisStyle = styleProp[key]

        if (isMotionValue(thisStyle)) {
            // If this is a motion value, add it to our MotionValuesMap
            values.set(key, thisStyle)
        } else if (isTransformProp(key) || isTransformOriginProp(key)) {
            // Or if it's a transform prop, create a motion value (or update an existing one)
            // to ensure Stylefire can reconcile all the transform values together.
            if (!values.has(key)) {
                // If it doesn't exist as a motion value, create it
                values.set(key, motionValue(thisStyle))
            } else {
                // Otherwise only update it if it's changed from a previous render
                if (thisStyle !== prevMotionStyles[key]) {
                    const value = values.get(key) as MotionValue
                    value.set(thisStyle)
                }
            }

            prevMotionStyles[key] = thisStyle
        } else {
            style[key] = thisStyle

stylefire

Performant, simplified stylers for CSS, SVG, path and DOM scroll.

MIT
Latest version published 4 years ago

Package Health Score

64 / 100
Full package analysis