Fix jumpy web animation for modal backdrop (#6673)

src/components/Dialog/index.web.tsx

@@ -7,7 +7,6 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
@@ -42,7 +41,6 @@ export function Outer({
   onClose,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const {_} = useLingui()
-  const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const [isOpen, setIsOpen] = React.useState(false)
   const {setDialogIsOpen} = useDialogStateControlContext()
@@ -118,16 +116,7 @@ export function Outer({
                   gtMobile ? a.p_lg : a.p_md,
                   {overflowY: 'auto'},
                 ]}>
-                <Animated.View
-                  entering={FadeIn.duration(150)}
-                  // exiting={FadeOut.duration(150)}
-                  style={[
-                    web(a.fixed),
-                    a.inset_0,
-                    {opacity: 0.8, backgroundColor: t.palette.black},
-                  ]}
-                />
-
+                <Backdrop />
                 <View
                   style={[
                     a.w_full,
@@ -164,7 +153,7 @@ export function Inner({
   useFocusGuards()
   return (
     <FocusScope loop asChild trapped>
-      <Animated.View
+      <View
         role="dialog"
         aria-role="dialog"
         aria-label={label}
@@ -174,8 +163,6 @@ export function Inner({
         onClick={stopPropagation}
         onStartShouldSetResponder={_ => true}
         onTouchEnd={stopPropagation}
-        entering={FadeInDown.duration(100)}
-        // exiting={FadeOut.duration(100)}
         style={flatten([
           a.relative,
           a.rounded_md,
@@ -188,6 +175,8 @@ export function Inner({
             shadowColor: t.palette.black,
             shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
             shadowRadius: 30,
+            // @ts-ignore web only
+            animation: 'fadeIn ease-out 0.1s',
           },
           flatten(style),
         ])}>
@@ -201,7 +190,7 @@ export function Inner({
             {children}
           </View>
         </DismissableLayer>
-      </Animated.View>
+      </View>
     </FocusScope>
   )
 }
@@ -268,3 +257,25 @@ export function Close() {
 export function Handle() {
   return null
 }
+
+function Backdrop() {
+  const t = useTheme()
+  return (
+    <View
+      style={{
+        opacity: 0.8,
+      }}>
+      <View
+        style={[
+          a.fixed,
+          a.inset_0,
+          {
+            backgroundColor: t.palette.black,
+            // @ts-ignore web only
+            animation: 'fadeIn ease-out 0.15s',
+          },
+        ]}
+      />
+    </View>
+  )
+}

src/components/ProfileHoverCard/index.web.tsx

@@ -302,8 +302,8 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   const animationStyle = {
     animation:
       currentState.stage === 'hiding'
-        ? `avatarHoverFadeOut ${HIDE_DURATION}ms both`
-        : `avatarHoverFadeIn ${SHOW_DURATION}ms both`,
+        ? `fadeOut ${HIDE_DURATION}ms both`
+        : `fadeIn ${SHOW_DURATION}ms both`,
   }
 
   return (

src/style.css

@@ -184,7 +184,7 @@ input:focus {
   animation: rotate 500ms linear infinite;
 }
 
-@keyframes avatarHoverFadeIn {
+@keyframes fadeIn {
   from {
     opacity: 0;
   }
@@ -193,7 +193,7 @@ input:focus {
   }
 }
 
-@keyframes avatarHoverFadeOut {
+@keyframes fadeOut {
   from {
     opacity: 1;
   }