fix(flashcards): use explicit per-property configs to fix decay physics
Removed conflicting top-level config that was interfering with decay animations. Now using explicit config objects for each property: - x, y: decay physics with velocity - scale, rotation: wobbly spring animations This should fix the issue where cards were snapping back to pickup position instead of staying where dropped. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -213,6 +213,7 @@ function DraggableCard({ card }: DraggableCardProps) {
|
|||||||
// Calculate final rotation based on throw direction
|
// Calculate final rotation based on throw direction
|
||||||
const throwAngle = Math.atan2(throwVelocityY, throwVelocityX) * (180 / Math.PI)
|
const throwAngle = Math.atan2(throwVelocityY, throwVelocityX) * (180 / Math.PI)
|
||||||
|
|
||||||
|
// Start position decay and rotation/scale animations
|
||||||
api.start({
|
api.start({
|
||||||
x: {
|
x: {
|
||||||
velocity: throwVelocityX,
|
velocity: throwVelocityX,
|
||||||
@@ -222,9 +223,14 @@ function DraggableCard({ card }: DraggableCardProps) {
|
|||||||
velocity: throwVelocityY,
|
velocity: throwVelocityY,
|
||||||
config: { decay: true },
|
config: { decay: true },
|
||||||
},
|
},
|
||||||
scale: 1,
|
scale: {
|
||||||
rotation: throwAngle + 90, // Card aligns with throw direction
|
value: 1,
|
||||||
config: config.wobbly,
|
config: config.wobbly,
|
||||||
|
},
|
||||||
|
rotation: {
|
||||||
|
value: throwAngle + 90, // Card aligns with throw direction
|
||||||
|
config: config.wobbly,
|
||||||
|
},
|
||||||
onChange: (result) => {
|
onChange: (result) => {
|
||||||
// Continue updating position as card settles with momentum
|
// Continue updating position as card settles with momentum
|
||||||
if (result.value.x !== undefined) {
|
if (result.value.x !== undefined) {
|
||||||
|
|||||||
Reference in New Issue
Block a user