Skip to main content
Version: 2.x


Starts a velocity based "scroll" animation.


options [object]

Object containing animation configuration. Allowed parameters are listed below:

velocity0Initial velocity
deceleration0.998Rate of decay
clamp[]Array of two animation boundaries (optional)
velocityFactor1Factor to modify velocity unit (optional)
rubberBandEffectfalseRubber band effect after reach clamp limit (optional)
rubberBandFactor0.6Factor to modify rubberBandEffect force (optional)

The default unit of velocity in decay is pixels per second but it can be problematic when you want to animate a value not related to pixels for example opacity [0, 1] or progress bar [0, 1]. In this case, you can use velocityFactor property with value < 1 to modify the velocity of change to fit the required domain.

callback [function](optional)

The provided function will be called when the animation is complete. In case the animation is cancelled, the callback will receive false as the argument, otherwise it will receive true.


This method returns an animation object. It can be either assigned directly to a Shared Value or can be used as a value for a style object returned from useAnimatedStyle.


import Animated, {
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

function App() {
const x = useSharedValue(0);

const gestureHandler = useAnimatedGestureHandler({
onStart: (_, ctx) => {
ctx.startX = x.value;
onActive: (event, ctx) => {
x.value = ctx.startX + event.translationX;
onEnd: (evt) => {
x.value = withDecay({
velocity: evt.velocityX,
clamp: [0, 200], // optionally define boundaries for the animation

const animatedStyle = useAnimatedStyle(() => {
return {
transform: [
translateX: x.value,

return (
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View style={[, animatedStyle]} />