Replace VisualElement rendering with effects

dev/react/src/examples/Animation-animate.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion"
+import { motion, motionValue } from "framer-motion"
 import { useEffect, useState } from "react"
 
 /**
@@ -8,7 +8,7 @@ import { useEffect, useState } from "react"
 const style = {
     width: 100,
     height: 100,
-    background: "white",
+    background: motionValue("#f00"),
 }
 export const App = () => {
     const [state, setState] = useState(false)

packages/framer-motion/src/animation/hooks/animation-controls.ts

@@ -5,7 +5,7 @@ import type { VisualElement } from "../../render/VisualElement"
 import { animateVisualElement } from "../interfaces/visual-element"
 
 function stopAnimation(visualElement: VisualElement) {
-    visualElement.values.forEach((value) => value.stop())
+    visualElement.state.values.forEach(({ value }) => value.stop())
 }
 
 function setVariants(visualElement: VisualElement, variantLabels: string[]) {

packages/framer-motion/src/animation/hooks/use-animated-state.ts

@@ -1,6 +1,6 @@
-import { TargetAndTransition } from "motion-dom"
+import { MotionNodeState, TargetAndTransition } from "motion-dom"
 import { useLayoutEffect, useState } from "react"
-import { makeUseVisualState } from "../../motion/utils/use-visual-state"
+import { makeUseMotionNodeState } from "../../motion/utils/use-motion-value-state"
 import { createBox } from "../../projection/geometry/models"
 import { ResolvedValues } from "../../render/types"
 import { VisualElement } from "../../render/VisualElement"
@@ -23,7 +23,6 @@ class StateVisualElement extends VisualElement<
     measureInstanceViewportBox = createBox
     resetTransform() {}
     restoreTransform() {}
-    removeValueFromRenderState() {}
     renderInstance() {}
     scrapeMotionValuesFromProps() {
         return createObject()
@@ -45,9 +44,9 @@ class StateVisualElement extends VisualElement<
     }
 }
 
-const useVisualState = makeUseVisualState({
+const useVisualState = makeUseMotionNodeState({
     scrapeMotionValuesFromProps: createObject,
-    createRenderState: createObject,
+    StateConstructor: MotionNodeState, // TODO ObjectMotionNodeState
 })
 
 /**
@@ -56,7 +55,7 @@ const useVisualState = makeUseVisualState({
  */
 export function useAnimatedState(initialState: any) {
     const [animationState, setAnimationState] = useState(initialState)
-    const visualState = useVisualState({}, false)
+    const state = useVisualState({}, false)
 
     const element = useConstant(() => {
         return new StateVisualElement(
@@ -66,7 +65,7 @@ export function useAnimatedState(initialState: any) {
                         setAnimationState({ ...v })
                     },
                 },
-                visualState,
+                state,
                 presenceContext: null,
             },
             { initialState }

packages/framer-motion/src/animation/interfaces/visual-element-target.ts

@@ -53,7 +53,7 @@ export function animateTarget(
     for (const key in target) {
         const value = visualElement.getValue(
             key,
-            visualElement.latestValues[key] ?? null
+            visualElement.state.latest[key] ?? null
         )
         const valueTarget = target[key as keyof typeof target]
 

packages/framer-motion/src/animation/utils/create-visual-element.ts

@@ -1,4 +1,4 @@
-import { isSVGElement, isSVGSVGElement } from "motion-dom"
+import { isSVGElement, isSVGSVGElement, MotionNodeState } from "motion-dom"
 import { HTMLVisualElement } from "../../render/html/HTMLVisualElement"
 import { ObjectVisualElement } from "../../render/object/ObjectVisualElement"
 import { visualElementStore } from "../../render/store"
@@ -8,16 +8,7 @@ export function createDOMVisualElement(element: HTMLElement | SVGElement) {
     const options = {
         presenceContext: null,
         props: {},
-        visualState: {
-            renderState: {
-                transform: {},
-                transformOrigin: {},
-                style: {},
-                vars: {},
-                attrs: {},
-            },
-            latestValues: {},
-        },
+        state: new MotionNodeState({}),
     }
     const node =
         isSVGElement(element) && !isSVGSVGElement(element)
@@ -33,12 +24,7 @@ export function createObjectVisualElement(subject: Object) {
     const options = {
         presenceContext: null,
         props: {},
-        visualState: {
-            renderState: {
-                output: {},
-            },
-            latestValues: {},
-        },
+        state: new MotionNodeState({}),
     }
     const node = new ObjectVisualElement(options)
 

packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts

@@ -219,7 +219,7 @@ export class VisualElementDragControls {
              * of a re-render we want to ensure the browser can read the latest
              * bounding box to ensure the pointer and element don't fall out of sync.
              */
-            this.visualElement.render()
+            this.visualElement.state.render()
 
             /**
              * This must fire after the render call as it might trigger a state
@@ -682,7 +682,7 @@ export class VisualElementDragControls {
                         )
                     })
 
-                    this.visualElement.render()
+                    this.visualElement.state.render()
                 }
             }) as any
         )

packages/framer-motion/src/index.ts

@@ -21,9 +21,9 @@ export { addPointerEvent } from "./events/add-pointer-event"
 export { addPointerInfo } from "./events/event-info"
 export { animations } from "./motion/features/animations"
 export {
-    makeUseVisualState,
-    VisualState,
-} from "./motion/utils/use-visual-state"
+    makeUseMotionNodeState,
+    UseMotionNodeState,
+} from "./motion/utils/use-motion-value-state"
 export { calcLength } from "./projection/geometry/delta-calc"
 export { createBox } from "./projection/geometry/models"
 export { filterProps } from "./render/dom/utils/filter-props"
@@ -91,7 +91,6 @@ export { isValidMotionProp } from "./motion/utils/valid-prop"
 export { addScaleCorrector } from "./projection/styles/scale-correction"
 export { useInstantLayoutTransition } from "./projection/use-instant-layout-transition"
 export { useResetProjection } from "./projection/use-reset-projection"
-export { buildTransform } from "./render/html/utils/build-transform"
 export { visualElementStore } from "./render/store"
 export { VisualElement } from "./render/VisualElement"
 export { useAnimationFrame } from "./utils/use-animation-frame"

packages/framer-motion/src/motion/index.tsx

@@ -11,9 +11,7 @@ import { useCreateMotionContext } from "../context/MotionContext/create"
 import { DOMMotionComponents } from "../render/dom/types"
 import { useRender } from "../render/dom/use-render"
 import { isSVGComponent } from "../render/dom/utils/is-svg-component"
-import { HTMLRenderState } from "../render/html/types"
 import { useHTMLVisualState } from "../render/html/use-html-visual-state"
-import { SVGRenderState } from "../render/svg/types"
 import { useSVGVisualState } from "../render/svg/use-svg-visual-state"
 import { CreateVisualElement } from "../render/types"
 import { isBrowser } from "../utils/is-browser"
@@ -96,7 +94,7 @@ export function createMotionComponent<
 
         const context = useCreateMotionContext<HTMLElement | SVGElement>(props)
 
-        const visualState = useVisualState(props, isStatic)
+        const state = useVisualState(props, isStatic)
 
         if (!isStatic && isBrowser) {
             useStrictMode(configAndProps, preloadedFeatures)
@@ -112,7 +110,7 @@ export function createMotionComponent<
              */
             context.visualElement = useVisualElement(
                 Component,
-                visualState,
+                state,
                 configAndProps,
                 createVisualElement,
                 layoutProjection.ProjectionNode
@@ -134,12 +132,11 @@ export function createMotionComponent<
                 {useRender<Props, TagName>(
                     Component,
                     props,
-                    useMotionRef<
-                        HTMLElement | SVGElement,
-                        HTMLRenderState | SVGRenderState
-                    >(visualState, context.visualElement, externalRef),
-                    visualState,
-                    isStatic,
+                    useMotionRef<HTMLElement | SVGElement>(
+                        context.visualElement,
+                        externalRef
+                    ),
+                    state,
                     forwardMotionProps
                 )}
             </MotionContext.Provider>

packages/framer-motion/src/motion/utils/use-motion-ref.ts

@@ -2,23 +2,17 @@ import * as React from "react"
 import { useCallback } from "react"
 import type { VisualElement } from "../../render/VisualElement"
 import { isRefObject } from "../../utils/is-ref-object"
-import { VisualState } from "./use-visual-state"
 
 /**
  * Creates a ref function that, when called, hydrates the provided
  * external ref and VisualElement.
  */
-export function useMotionRef<Instance, RenderState>(
-    visualState: VisualState<Instance, RenderState>,
+export function useMotionRef<Instance>(
     visualElement?: VisualElement<Instance> | null,
     externalRef?: React.Ref<Instance>
 ): React.Ref<Instance> {
     return useCallback(
         (instance: Instance) => {
-            if (instance) {
-                visualState.onMount && visualState.onMount(instance)
-            }
-
             if (visualElement) {
                 if (instance) {
                     visualElement.mount(instance)

packages/framer-motion/src/motion/utils/use-visual-state.ts → packages/framer-motion/src/motion/utils/use-motion-value-state.ts

@@ -1,4 +1,4 @@
-import { AnyResolvedKeyframe } from "motion-dom"
+import { AnyResolvedKeyframe, MotionNodeState } from "motion-dom"
 import { useContext } from "react"
 import { isAnimationControls } from "../../animation/utils/is-animation-controls"
 import { MotionContext, MotionContextProps } from "../../context/MotionContext"
@@ -16,45 +16,33 @@ import { useConstant } from "../../utils/use-constant"
 import { resolveMotionValue } from "../../value/utils/resolve-motion-value"
 import { MotionProps } from "../types"
 
-export interface VisualState<Instance, RenderState> {
-    renderState: RenderState
-    latestValues: ResolvedValues
-    onMount?: (instance: Instance) => void
-}
-
-export type UseVisualState<Instance, RenderState> = (
+export type UseMotionNodeState = (
     props: MotionProps,
     isStatic: boolean
-) => VisualState<Instance, RenderState>
+) => MotionNodeState
 
-export interface UseVisualStateConfig<RenderState> {
+export interface UseMotionNodeStateConfig {
     scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps
-    createRenderState: () => RenderState
+    StateConstructor: new (initialValues: ResolvedValues) => MotionNodeState
 }
 
-function makeState<I, RS>(
-    {
-        scrapeMotionValuesFromProps,
-        createRenderState,
-    }: UseVisualStateConfig<RS>,
+function makeMotionNodeState(
+    { scrapeMotionValuesFromProps, StateConstructor }: UseMotionNodeStateConfig,
     props: MotionProps,
     context: MotionContextProps,
     presenceContext: PresenceContextProps | null
 ) {
-    const state: VisualState<I, RS> = {
-        latestValues: makeLatestValues(
+    return new StateConstructor(
+        makeInitialValues(
             props,
             context,
             presenceContext,
             scrapeMotionValuesFromProps
-        ),
-        renderState: createRenderState(),
-    }
-
-    return state
+        )
+    )
 }
 
-function makeLatestValues(
+function makeInitialValues(
     props: MotionProps,
     context: MotionContextProps,
     presenceContext: PresenceContextProps | null,
@@ -128,12 +116,13 @@ function makeLatestValues(
     return values
 }
 
-export const makeUseVisualState =
-    <I, RS>(config: UseVisualStateConfig<RS>): UseVisualState<I, RS> =>
-    (props: MotionProps, isStatic: boolean): VisualState<I, RS> => {
+export const makeUseMotionNodeState =
+    (config: UseMotionNodeStateConfig): UseMotionNodeState =>
+    (props: MotionProps, isStatic: boolean): MotionNodeState => {
         const context = useContext(MotionContext)
         const presenceContext = useContext(PresenceContext)
-        const make = () => makeState(config, props, context, presenceContext)
+        const make = () =>
+            makeMotionNodeState(config, props, context, presenceContext)
 
         return isStatic ? make() : useConstant(make)
     }

packages/framer-motion/src/motion/utils/use-visual-element.ts

@@ -1,3 +1,4 @@
+import { MotionNodeState } from "motion-dom"
 import * as React from "react"
 import { useContext, useEffect, useInsertionEffect, useRef } from "react"
 import { optimizedAppearDataAttribute } from "../../animation/optimized-appear/data-id"
@@ -12,22 +13,17 @@ import {
 import { MotionProps } from "../../motion/types"
 import { IProjectionNode } from "../../projection/node/types"
 import { DOMMotionComponents } from "../../render/dom/types"
-import { HTMLRenderState } from "../../render/html/types"
-import { SVGRenderState } from "../../render/svg/types"
 import { CreateVisualElement } from "../../render/types"
 import type { VisualElement } from "../../render/VisualElement"
 import { isRefObject } from "../../utils/is-ref-object"
 import { useIsomorphicLayoutEffect } from "../../utils/use-isomorphic-effect"
-import { VisualState } from "./use-visual-state"
 
 export function useVisualElement<
     Props,
     TagName extends keyof DOMMotionComponents | string
 >(
     Component: TagName | string | React.ComponentType<Props>,
-    visualState:
-        | VisualState<SVGElement, SVGRenderState>
-        | VisualState<HTMLElement, HTMLRenderState>,
+    state: MotionNodeState,
     props: MotionProps & Partial<MotionConfigContext>,
     createVisualElement?: CreateVisualElement<Props, TagName>,
     ProjectionNodeConstructor?: any
@@ -50,7 +46,7 @@ export function useVisualElement<
 
     if (!visualElementRef.current && createVisualElement) {
         visualElementRef.current = createVisualElement(Component, {
-            visualState,
+            state,
             parent,
             props,
             presenceContext,
@@ -167,7 +163,7 @@ function createProjectionNode(
     } = props
 
     visualElement.projection = new ProjectionNodeConstructor(
-        visualElement.latestValues,
+        visualElement.state.latest,
         props["data-framer-portal-id"]
             ? undefined
             : getClosestProjectingNode(visualElement.parent)

packages/framer-motion/src/projection.ts

@@ -6,6 +6,5 @@ export { correctBorderRadius } from "./projection/styles/scale-border-radius"
 export { correctBoxShadow } from "./projection/styles/scale-box-shadow"
 export { addScaleCorrector } from "./projection/styles/scale-correction"
 export { HTMLVisualElement } from "./render/html/HTMLVisualElement"
-export { buildTransform } from "./render/html/utils/build-transform"
 export { frame, frameData, mix }
 import { frame, frameData, mix } from "motion-dom"