Skip to content

fix(Reanimated): withSpring overshoot clamping coordinates #7959

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 31, 2025

Conversation

tjzel
Copy link
Collaborator

@tjzel tjzel commented Jul 31, 2025

Summary

Fixes #7947

When fixing various thing in withSpring in #7803 I moved over to a coherent coordinate system for the animation. This means that when animating a value from 700 to 600, the animation internally animated from 100 to 0. For 600 to 700 it's -100 to 0. I accidentally didn't reflect that change for overshootClamping checks.

Test plan

import React, { useEffect, useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const [toggle, setToggle] = useState(false);
  const height = useSharedValue(600);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: withSpring(height.value, {
        overshootClamping: true,
      }),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View
        style={[{ width: 100, backgroundColor: 'blue' }, animatedStyle]}
      />
      <Button
        title="Change Height"
        onPress={() => {
          const target = toggle ? 600 : 500;
          height.value = target;
          setToggle(!toggle);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
Before After
before.mov
after.mov

@tjzel tjzel added this pull request to the merge queue Jul 31, 2025
Merged via the queue into main with commit cf3273c Jul 31, 2025
12 checks passed
@tjzel tjzel deleted the @tjzel/reanimated/fix-spring-clamping branch July 31, 2025 16:17
tjzel added a commit that referenced this pull request Jul 31, 2025
## Summary

Fixes #7947

When fixing various thing in withSpring in #7803 I moved over to a
coherent coordinate system for the animation. This means that when
animating a value from 700 to 600, the animation internally animated
from 100 to 0. For 600 to 700 it's -100 to 0. I accidentally didn't
reflect that change for `overshootClamping` checks.

## Test plan

```tsx
import React, { useEffect, useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const [toggle, setToggle] = useState(false);
  const height = useSharedValue(600);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: withSpring(height.value, {
        overshootClamping: true,
      }),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View
        style={[{ width: 100, backgroundColor: 'blue' }, animatedStyle]}
      />
      <Button
        title="Change Height"
        onPress={() => {
          const target = toggle ? 600 : 500;
          height.value = target;
          setToggle(!toggle);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```


| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/75ac8595-90dd-44f1-ab04-5c5126941e1e"/>
| <video
src="https://github.com/user-attachments/assets/45c6f4e8-0291-42be-a268-8ee43ee72fb7"/>
|
tjzel added a commit that referenced this pull request Aug 1, 2025
## Summary

Fixes #7947

When fixing various thing in withSpring in #7803 I moved over to a
coherent coordinate system for the animation. This means that when
animating a value from 700 to 600, the animation internally animated
from 100 to 0. For 600 to 700 it's -100 to 0. I accidentally didn't
reflect that change for `overshootClamping` checks.

## Test plan

```tsx
import React, { useEffect, useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const [toggle, setToggle] = useState(false);
  const height = useSharedValue(600);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: withSpring(height.value, {
        overshootClamping: true,
      }),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View
        style={[{ width: 100, backgroundColor: 'blue' }, animatedStyle]}
      />
      <Button
        title="Change Height"
        onPress={() => {
          const target = toggle ? 600 : 500;
          height.value = target;
          setToggle(!toggle);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```


| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/75ac8595-90dd-44f1-ab04-5c5126941e1e"/>
| <video
src="https://github.com/user-attachments/assets/45c6f4e8-0291-42be-a268-8ee43ee72fb7"/>
|
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

overshootClamping is breaking for small changes in withSpring
2 participants