fix(flashcards): fix position snap-back by using api.set before decay
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 <noreply@anthropic.com>
This commit is contained in:
parent
86357b3d7a
commit
30e16c8e5a
|
|
@ -200,6 +200,12 @@ function DraggableCard({ card }: DraggableCardProps) {
|
||||||
currentPositionRef.current.x = currentPositionRef.current.x + mx
|
currentPositionRef.current.x = currentPositionRef.current.x + mx
|
||||||
currentPositionRef.current.y = currentPositionRef.current.y + my
|
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
|
// On release, apply momentum with decay physics
|
||||||
const throwVelocityX = lastVelocityRef.current.vx * 1000
|
const throwVelocityX = lastVelocityRef.current.vx * 1000
|
||||||
const throwVelocityY = lastVelocityRef.current.vy * 1000
|
const throwVelocityY = lastVelocityRef.current.vy * 1000
|
||||||
|
|
@ -209,14 +215,12 @@ function DraggableCard({ card }: DraggableCardProps) {
|
||||||
|
|
||||||
api.start({
|
api.start({
|
||||||
x: {
|
x: {
|
||||||
from: currentPositionRef.current.x,
|
|
||||||
velocity: throwVelocityX,
|
velocity: throwVelocityX,
|
||||||
decay: true,
|
config: { decay: true },
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
from: currentPositionRef.current.y,
|
|
||||||
velocity: throwVelocityY,
|
velocity: throwVelocityY,
|
||||||
decay: true,
|
config: { decay: true },
|
||||||
},
|
},
|
||||||
scale: 1,
|
scale: 1,
|
||||||
rotation: throwAngle + 90, // Card aligns with throw direction
|
rotation: throwAngle + 90, // Card aligns with throw direction
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue