Fix pan event firing order: ensure onPanStart fires before onPan

packages/framer-motion/src/gestures/__tests__/pan.test.tsx

@@ -44,6 +44,40 @@ describe("pan", () => {
         expect(count).toBeGreaterThan(0)
     })
 
+    test("onPanStart fires before onPan", async () => {
+        const events: string[] = []
+        const onPanEnd = deferred()
+        const Component = () => {
+            return (
+                <MockDrag>
+                    <motion.div
+                        onPanStart={() => events.push("start")}
+                        onPan={() => events.push("pan")}
+                        onPanEnd={() => {
+                            events.push("end")
+                            onPanEnd.resolve()
+                        }}
+                    />
+                </MockDrag>
+            )
+        }
+
+        const { container, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        const pointer = await drag(container.firstChild).to(100, 100)
+        await dragFrame.postRender()
+        pointer.end()
+        await onPanEnd.promise
+
+        // onPanStart should fire before the first onPan
+        const startIndex = events.indexOf("start")
+        const firstPanIndex = events.indexOf("pan")
+        expect(startIndex).toBeGreaterThanOrEqual(0)
+        expect(firstPanIndex).toBeGreaterThanOrEqual(0)
+        expect(startIndex).toBeLessThan(firstPanIndex)
+    })
+
     test("onPanEnd doesn't fire unless onPanStart has", async () => {
         const onPanStart = jest.fn()
         const onPanEnd = jest.fn()

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

@@ -175,7 +175,7 @@ export class VisualElementDragControls {
 
             // Fire onDragStart event
             if (onDragStart) {
-                frame.postRender(() => onDragStart(event, info))
+                frame.update(() => onDragStart(event, info), false, true)
             }
 
             addValueToWillChange(this.visualElement, "transform")
@@ -227,7 +227,9 @@ export class VisualElementDragControls {
              * This must fire after the render call as it might trigger a state
              * change which itself might trigger a layout update.
              */
-            onDrag && onDrag(event, info)
+            if (onDrag) {
+                frame.update(() => onDrag(event, info), false, true)
+            }
         }
 
         const onSessionEnd = (event: PointerEvent, info: PanInfo) => {

packages/framer-motion/src/gestures/pan/index.ts

@@ -8,7 +8,7 @@ type PanEventHandler = (event: PointerEvent, info: PanInfo) => void
 const asyncHandler =
     (handler?: PanEventHandler) => (event: PointerEvent, info: PanInfo) => {
         if (handler) {
-            frame.postRender(() => handler(event, info))
+            frame.update(() => handler(event, info), false, true)
         }
     }
 
@@ -35,7 +35,7 @@ export class PanGesture extends Feature<Element> {
         return {
             onSessionStart: asyncHandler(onPanSessionStart),
             onStart: asyncHandler(onPanStart),
-            onMove: onPan,
+            onMove: asyncHandler(onPan),
             onEnd: (event: PointerEvent, info: PanInfo) => {
                 delete this.session
                 if (onPanEnd) {