From feee26b15bba66b8ec01f89bb7c3450476564545 Mon Sep 17 00:00:00 2001 From: QwertyChouskie Date: Tue, 16 Sep 2025 16:40:05 -0700 Subject: [PATCH] Modal: Significantly improve animation `ease-in` and `ease-out` were mixed up, making the animation jarring, as it would accelerate faster towards the destination. The defined `cubic-bezier` animations now used are approximately equivalent to using `Easing.out(Easing.cubic)` for the animation in and `Easing.in(Easing.sin)` for the animation out. --- .../react-native-web/src/exports/Modal/ModalAnimation.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-native-web/src/exports/Modal/ModalAnimation.js b/packages/react-native-web/src/exports/Modal/ModalAnimation.js index b053d3531..2f76a7b98 100644 --- a/packages/react-native-web/src/exports/Modal/ModalAnimation.js +++ b/packages/react-native-web/src/exports/Modal/ModalAnimation.js @@ -12,7 +12,7 @@ import * as React from 'react'; import StyleSheet from '../StyleSheet'; import createElement from '../createElement'; -const ANIMATION_DURATION = 300; +const ANIMATION_DURATION = 250; function getAnimationStyle(animationType, visible) { if (animationType === 'slide') { @@ -100,12 +100,12 @@ const styles = StyleSheet.create({ }, animatedIn: { animationDuration: `${ANIMATION_DURATION}ms`, - animationTimingFunction: 'ease-in' + animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)' }, animatedOut: { pointerEvents: 'none', animationDuration: `${ANIMATION_DURATION}ms`, - animationTimingFunction: 'ease-out' + animationTimingFunction: 'cubic-bezier(0.47, 0, 0.745, 0.715)' }, fadeIn: { opacity: 1,