Fix/restart animation when pointer up during drag constraints

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

@@ -94,6 +94,8 @@ export class VisualElementDragControls {
      */
     private latestPanInfo: PanInfo | null = null
 
+    private applyingConstraints = false
+
     constructor(visualElement: VisualElement<HTMLElement>) {
         this.visualElement = visualElement
     }
@@ -113,7 +115,7 @@ export class VisualElementDragControls {
 
             // Stop or pause any animations on both axis values immediately. This allows the user to throw and catch
             // the component.
-            dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation()
+            dragSnapToOrigin || this.applyingConstraints ? this.pauseAnimation() : this.stopAnimation()
 
             if (snapToCursor) {
                 this.snapToCursor(extractEventInfo(event).point)
@@ -258,6 +260,7 @@ export class VisualElementDragControls {
             {
                 transformPagePoint: this.visualElement.getTransformPagePoint(),
                 dragSnapToOrigin,
+                applyingConstraints: this.applyingConstraints,
                 distanceThreshold,
                 contextWindow: getContextWindow(this.visualElement),
             }
@@ -320,6 +323,11 @@ export class VisualElementDragControls {
 
         // Apply constraints
         if (this.constraints && this.constraints[axis]) {
+            this.applyingConstraints = false
+            const { min, max } = this.constraints[axis]
+            if ((min && next < min) || (max && next > max)) {
+                this.applyingConstraints = true
+            }
             next = applyConstraints(
                 next,
                 this.constraints[axis],

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

@@ -23,6 +23,7 @@ interface PanSessionHandlers {
 interface PanSessionOptions {
     transformPagePoint?: TransformPoint
     dragSnapToOrigin?: boolean
+    applyingConstraints?: boolean;
     distanceThreshold?: number
     contextWindow?: (Window & typeof globalThis) | null
 }
@@ -77,6 +78,13 @@ export class PanSession {
      */
     private dragSnapToOrigin: boolean
 
+    /**
+     * Resume animation to the drag constraints box
+     *
+     * @internal
+     */
+    private applyingConstraints: boolean = false
+
     /**
      * The distance after which panning should start.
      *
@@ -96,13 +104,15 @@ export class PanSession {
             transformPagePoint,
             contextWindow = window,
             dragSnapToOrigin = false,
+            applyingConstraints = false,
             distanceThreshold = 3,
         }: PanSessionOptions = {}
     ) {
         // If we have more than one touch, don't start detecting this gesture
         if (!isPrimaryPointer(event)) return
 
         this.dragSnapToOrigin = dragSnapToOrigin
+        this.applyingConstraints = applyingConstraints
         this.handlers = handlers
         this.transformPagePoint = transformPagePoint
         this.distanceThreshold = distanceThreshold
@@ -180,7 +190,7 @@ export class PanSession {
 
         const { onEnd, onSessionEnd, resumeAnimation } = this.handlers
 
-        if (this.dragSnapToOrigin) resumeAnimation && resumeAnimation()
+        if (this.dragSnapToOrigin || this.applyingConstraints) resumeAnimation && resumeAnimation()
         if (!(this.lastMoveEvent && this.lastMoveEventInfo)) return
 
         const panInfo = getPanInfo(