fix(card-sorting): smooth scale animation while dragging cards

Cards now smoothly scale when transitioning between sizes while being
dragged, instead of instantly snapping to the new size.

Changed the spring's `immediate` property from a boolean to a function
that checks the property key:
- Scale always animates smoothly (returns false for 'scale')
- Position and rotation are immediate during dragging (responsive feel)

This provides:
- Smooth visual feedback when dragging cards into correct positions
- Maintains responsive position tracking during dragging
- Consistent animation feel across all card transformations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-23 21:27:57 -05:00
parent 6b095c3383
commit 0eefc332ac

View File

@@ -743,14 +743,20 @@ function AnimatedCard({
// Use spring animation for position, rotation, and scale // Use spring animation for position, rotation, and scale
// Disable animation when: // Disable animation when:
// - User is dragging (for immediate response) // - User is dragging (for immediate response on position/rotation)
// - Viewport is resizing (for instant repositioning) // - Viewport is resizing (for instant repositioning)
// Note: Scale always animates smoothly, even during dragging
const springProps = useSpring({ const springProps = useSpring({
left: pixelPos.x, left: pixelPos.x,
top: pixelPos.y, top: pixelPos.y,
rotation: cardState.rotation, rotation: cardState.rotation,
scale: isCorrectPosition ? 0.5 : 1, // Scale down to 50% when in correct position (for all users) scale: isCorrectPosition ? 0.5 : 1, // Scale down to 50% when in correct position (for all users)
immediate: isDragging || isResizing, // Instant updates when dragging or resizing immediate: (key) => {
// Scale always animates smoothly
if (key === 'scale') return false
// Position and rotation are immediate when dragging or resizing
return isDragging || isResizing
},
config: { config: {
tension: 300, tension: 300,
friction: 30, friction: 30,