From 30e16c8e5ac3bb25f2d54cf715dc6fb45adc4fcc Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Tue, 21 Oct 2025 10:35:56 -0500 Subject: [PATCH] fix(flashcards): fix position snap-back by using api.set before decay MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed the issue where cards were snapping back to pickup position: - Use api.set() to immediately snap spring position to dropped location - Then apply decay animation with momentum from that position - Removed problematic 'from' property which doesn't work with decay The bug was that react-spring's 'from' property is ignored when using decay: true, causing the spring to animate from its current value rather than the specified position. Using api.set() first ensures the spring starts from the correct dropped position. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- apps/web/src/components/InteractiveFlashcards.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/web/src/components/InteractiveFlashcards.tsx b/apps/web/src/components/InteractiveFlashcards.tsx index 6b79db7c..3822f22a 100644 --- a/apps/web/src/components/InteractiveFlashcards.tsx +++ b/apps/web/src/components/InteractiveFlashcards.tsx @@ -200,6 +200,12 @@ function DraggableCard({ card }: DraggableCardProps) { currentPositionRef.current.x = currentPositionRef.current.x + mx currentPositionRef.current.y = currentPositionRef.current.y + my + // First, snap the spring to the dropped position immediately + api.set({ + x: currentPositionRef.current.x, + y: currentPositionRef.current.y, + }) + // On release, apply momentum with decay physics const throwVelocityX = lastVelocityRef.current.vx * 1000 const throwVelocityY = lastVelocityRef.current.vy * 1000 @@ -209,14 +215,12 @@ function DraggableCard({ card }: DraggableCardProps) { api.start({ x: { - from: currentPositionRef.current.x, velocity: throwVelocityX, - decay: true, + config: { decay: true }, }, y: { - from: currentPositionRef.current.y, velocity: throwVelocityY, - decay: true, + config: { decay: true }, }, scale: 1, rotation: throwAngle + 90, // Card aligns with throw direction