How to use stylefire - 10 common examples

layoutSync.render(() => {
            // Reverse the layout delta of all newly laid-out layoutTransition components into their
            // prev visual state and then animate them into their new one using transforms.
            const prevLayout = compare.getLayout(prev)
            const nextLayout = compare.getLayout(next)
            const delta = calcDelta(prevLayout, nextLayout)
            const hasAnyChanged =
                delta.x || delta.y || delta.width || delta.height

            if (!hasAnyChanged) {
                // If layout hasn't changed, reapply the transform and get out of here.
                transform && (element.style.transform = transform)
                return
            }

            styler(element).set({
                originX: delta.originX,
                originY: delta.originY,
            })
            syncRenderSession.open()

            const target: TargetAndTransition = {}
            const transition: Transition = {}

            const transitionDefinition = isResolver(layoutTransition)
                ? layoutTransition({ delta })
                : layoutTransition

            function makeTransition(
                layoutKey: keyof Layout,
                transformKey: string,
                targetValue: number,

readValueFromSource: key =>
                    styler(ref.current as Element).get(key),
                // TODO: This is a good second source of plugins. This function contains the CSS variable

useLayoutEffect(() => {
        const target = getPosition()

        if (prev && target && hasMoved(prev, target)) {
            const delta = measureDelta(prev, target)

            const transitionDefinition = isResolver(positionTransition)
                ? positionTransition({ delta })
                : positionTransition

            const transition = createTransition(values, transitionDefinition)
            const x = transition("x", delta.x)
            const y = transition("y", delta.y)

            // Force a render now rather than waiting for the next render loop
            styler(ref.current as HTMLElement).render()

            if (transitionDefinition) {
                controls.start({ x: 0, y: 0, transition: { x, y } })
            }
        }
    })
}

isStatic?: boolean
): CSSProperties => {
    const motionValueStyles: { [key: string]: any } = resolveCurrent(values)
    const transformTemplate = values.getTransformTemplate()

    if (transformTemplate) {
        // If `transform` has been manually set as a string, pass that through the template
        // otherwise pass it forward to Stylefire's style property builder
        motionValueStyles.transform = styleProp.transform
            ? transformTemplate({}, styleProp.transform)
            : transformTemplate
    }

    return {
        ...styleProp,
        ...buildStyleProperty(motionValueStyles, !isStatic),
    }
}

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

const pose = (element, props = {}) => {
  const elementStyler = styler(element, { preparseOutput: false });
  const poses = createPoses(props);
  const values = createValues({ poses, styler: elementStyler, ...props });
  const activeActions = new Map();
  const children = new Set();
  const dimensions = new Dimensions(element);
  const dragProps = props.draggable ? {
    bounds: props.dragBounds,
    onDragStart: props.onDragStart,
    onDragEnd: props.onDragEnd
  } : {};

  const set = createPoseSetter({
    element,
    elementStyler,
    poses,
    values,

export const bindValuesToRef = (
    values: MotionValueMap,
    ref: RefObject<element>
) =&gt; {
    invariant(
        ref.current !== null,
        "No DOM reference found. Ensure custom components use `forwardRef` to forward the `ref` property to the host DOM component."
    )

    if (!ref.current) return

    const domStyler = styler(ref.current, { preparseOutput: false })

    values.forEach((value, key) =&gt; {
        if (!value.hasOnRender()) {
            value.setOnRender((v: any) =&gt; domStyler.set(key, v))
        }
    })
}
</element>

const createStyler = (node: HTMLElement | (SVGGraphicsElement & SVGPathElement)): Styler => styler(node);

setRef = node => {
    if (node) {
      this.nodeStyler = styler(node)
      this.nodeStyler
        .set({
          width: this.props.width,
          height: this.props.height,
        })
        .render()
    }
  }

useEffect(() => {
        invariant(
            ref.current instanceof Element,
            "No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`"
        )

        const domStyler = styler(ref.current as Element, {
            preparseOutput: false,
            enableHardwareAcceleration: !isStatic,
        })

        values.mount((key, value) => {
            domStyler.set(key, value)

            if (syncRenderSession.isOpen()) {
                syncRenderSession.push(domStyler)
            }
        })

        return () => values.unmount()
    }, [])