Simplify useSpring (#3023)

dev/react/src/examples/useSpring.tsx

@@ -1,5 +1,5 @@
-import { frame, motion, useMotionValue, useSpring } from "framer-motion"
-import { useEffect, useRef, useState } from "react"
+import { motion, useMotionValue, useSpring } from "framer-motion"
+import { useRef, useState } from "react"
 
 const spring = {
     stiffness: 300,
@@ -13,9 +13,10 @@ function DragExample() {
     const dragY = useMotionValue(0)
     const x = useSpring(dragX, spring)
     const y = useSpring(dragY, spring)
+
     return (
         <motion.div
-            drag="x"
+            drag
             dragMomentum={false}
             _dragX={dragX}
             _dragY={dragY}
@@ -98,7 +99,7 @@ function MouseEventExample() {
     return (
         <motion.div
             ref={ref}
-            style={{ width: 100, height: 100, background: "yellow", x }}
+            style={{ width: 100, height: 100, background: "yellow", x, y }}
             onTapStart={startPointer}
             onTapCancel={cancelPointer}
             onTap={cancelPointer}

packages/framer-motion/src/value/use-spring.ts

@@ -5,7 +5,7 @@ import {
     animateValue,
 } from "../animation/animators/MainThreadAnimation"
 import { MotionConfigContext } from "../context/MotionConfigContext"
-import { frame, frameData } from "../frameloop"
+import { frame } from "../frameloop"
 import { useIsomorphicLayoutEffect } from "../utils/use-isomorphic-effect"
 import { MotionValue } from "../value"
 import { useMotionValue } from "./use-motion-value"
@@ -50,15 +50,6 @@ export function useSpring(
     const latestSetter = useRef<(v: number) => void>(() => {})
 
     const startAnimation = () => {
-        /**
-         * If the previous animation hasn't had the chance to even render a frame, render it now.
-         */
-        const animation = activeSpringAnimation.current
-
-        if (animation && animation.time === 0) {
-            animation.sample(frameData.delta)
-        }
-
         stopAnimation()
 
         activeSpringAnimation.current = animateValue({
@@ -89,7 +80,7 @@ export function useSpring(
             latestValue.current = v
             latestSetter.current = set
 
-            frame.update(startAnimation)
+            frame.postRender(startAnimation)
 
             return value.get()
         }, stopAnimation)