diff --git a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts index 0ac4e993c7a..1c8f7f23378 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts @@ -29,7 +29,7 @@ export class FadingTransition const delayFunction = this.getDelayFunction(); const callback = this.callbackV; const delay = this.getDelay(); - const duration = (this.durationV ?? 500) / 2; + const halfDuration = (this.durationV ?? 500) / 2; return (values) => { 'worklet'; @@ -45,24 +45,24 @@ export class FadingTransition opacity: delayFunction( delay, withSequence( - withTiming(0, { duration }), - withTiming(1, { duration }) + withTiming(0, { duration: halfDuration }), + withTiming(1, { duration: halfDuration }) ) ), originX: withDelay( - delay + duration, + delay + halfDuration, withTiming(values.targetOriginX, { duration: 0 }) ), originY: withDelay( - delay + duration, + delay + halfDuration, withTiming(values.targetOriginY, { duration: 0 }) ), width: withDelay( - delay + duration, + delay + halfDuration, withTiming(values.targetWidth, { duration: 0 }) ), height: withDelay( - delay + duration, + delay + halfDuration, withTiming(values.targetHeight, { duration: 0 }) ), }, diff --git a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/JumpingTransition.ts b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/JumpingTransition.ts index 8f7650b3af1..4e674068106 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/JumpingTransition.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/JumpingTransition.ts @@ -30,8 +30,9 @@ export class JumpingTransition const delayFunction = this.getDelayFunction(); const callback = this.callbackV; const delay = this.getDelay(); - const duration = (this.durationV ?? 300) / 2; - const config = { duration: duration * 2 }; + const duration = this.durationV ?? 300; + const halfDuration = duration / 2; + const config = { duration }; return (values) => { 'worklet'; @@ -57,13 +58,13 @@ export class JumpingTransition withTiming( Math.min(values.targetOriginY, values.currentOriginY) - d, { - duration, + duration: halfDuration, easing: Easing.out(Easing.exp), } ), withTiming(values.targetOriginY, { ...config, - duration, + duration: halfDuration, easing: Easing.bounce, }) ) diff --git a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/SequencedTransition.ts b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/SequencedTransition.ts index 563138856c5..8c30685e9ea 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/SequencedTransition.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/SequencedTransition.ts @@ -41,8 +41,8 @@ export class SequencedTransition const delayFunction = this.getDelayFunction(); const callback = this.callbackV; const delay = this.getDelay(); - const sequenceDuration = (this.durationV ?? 500) / 2; - const config = { duration: sequenceDuration }; + const halfDuration = (this.durationV ?? 500) / 2; + const config = { duration: halfDuration }; const reverse = this.reversed; return (values) => {