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:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user