Motion Animation Bug Reproduction

Minimal reproduction of a bug in the motion library where animations "jump" instead of smoothly interpolating when:

1. The main thread is doing work frequently
2. Animations are triggered rapidly (multiple times within a single frame)

The Bug

When using motion's useAnimate hook to trigger animations on elements, and:

• The main thread is busy (simulated with CPU load)
• Animations are triggered faster than once per frame (e.g., quickly moving mouse over elements)

The animation doesn't smoothly continue from its current interpolated position. Instead, it appears to "jump" to the target or restart from an incorrect position.

This is visible on tamagui.dev when using the motion animation driver - quickly hovering over the logo letters causes the animated indicator to jump around instead of smoothly following.

Reproduction Steps

1. npm install
2. npm run dev
3. Open http://localhost:5173
4. First try hovering over the circles quickly with CPU load OFF - animation is smooth
5. Increase CPU load to 100% or higher
6. Hover quickly over the circles again
7. Notice the red x indicator "jumps" to positions instead of smoothly animating

Pattern Used

This reproduction uses the same pattern as @tamagui/animations-motion:

const [scope, animate] = useAnimate()

// On style change, diff and animate
const diff = getDiff(lastStyle, nextStyle)
if (diff) {
  animate(scope.current, diff, { type: 'spring', ... })
}

Expected Behavior

When a new animation is triggered before the previous one completes, motion should:

• Read the current interpolated value from the in-progress animation
• Start the new animation FROM that current value
• Smoothly transition to the new target

Actual Behavior

Motion appears to:

• Jump to the previous target value (or some incorrect position)
• Then animate from there to the new target
• This causes visible "jumps" especially under CPU load