diff --git a/src/components/animations/JiggleAnimation.tsx b/src/components/animations/JiggleAnimation.tsx index 5c34048e1ff..a1ea5cb606a 100644 --- a/src/components/animations/JiggleAnimation.tsx +++ b/src/components/animations/JiggleAnimation.tsx @@ -21,10 +21,18 @@ export function JiggleAnimation({ children, amplitude = 2, duration = 125, enabl const rotation = useSharedValue(0); const internalEnabled = useSharedValue(typeof enabled === 'boolean' ? enabled : false); - // slightly randomize duration to avoid sync with other jiggles - const instanceDuration = duration * (1 + (Math.random() - 0.5) * 0.2); // 10% variance - // randomize initial rotation direction to avoid sync with other jiggles - const initialRotation = Math.random() * amplitude; + // Randomize some initial values to avoid sync with other jiggles + // Randomize duration (5% variance) + const instanceDuration = duration * (1 + (Math.random() - 0.5) * 0.1); + + // Randomize initial rotation that's at least 50% of the amplitude + const minInitialRotation = amplitude * 0.5; + const rotationRange = amplitude - minInitialRotation; + const initialRotation = minInitialRotation + Math.random() * rotationRange; + + // Randomize initial direction + const initialDirection = Math.random() < 0.5 ? -1 : 1; + const firstRotation = initialRotation * initialDirection; useEffect(() => { if (typeof enabled === 'boolean') { @@ -39,8 +47,8 @@ export function JiggleAnimation({ children, amplitude = 2, duration = 125, enabl enabled => { if (enabled) { rotation.value = withSequence( - withTiming(initialRotation, { duration: instanceDuration / 2 }), - withRepeat(withTiming(-amplitude, { duration: instanceDuration }), -1, true) + withTiming(firstRotation, { duration: instanceDuration / 2 }), + withRepeat(withTiming(-amplitude * initialDirection, { duration: instanceDuration }), -1, true) ); } else { cancelAnimation(rotation);