[Perf] Adjust animation curves

src/components/left/LeftColumn.tsx

@@ -6,7 +6,7 @@ import { withGlobal } from '../../lib/teact/teactn';
 import { GlobalActions } from '../../global/types';
 import { LeftColumnContent, SettingsScreens } from '../../types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
+import { LAYERS_ANIMATION_NAME } from '../../util/environment';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
 import { pick } from '../../util/iteratees';
 
@@ -240,7 +240,7 @@ const LeftColumn: FC<StateProps & DispatchProps> = ({
   return (
     <Transition
       id="LeftColumn"
-      name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
+      name={LAYERS_ANIMATION_NAME}
       renderCount={RENDER_COUNT}
       activeKey={contentType}
       shouldCleanup

src/components/left/newChat/NewChat.tsx

@@ -4,7 +4,7 @@ import React, {
 
 import { LeftColumnContent } from '../../../types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
+import { LAYERS_ANIMATION_NAME } from '../../../util/environment';
 
 import Transition from '../../ui/Transition';
 import NewChatStep1 from './NewChatStep1';
@@ -36,7 +36,7 @@ const NewChat: FC<OwnProps> = ({
   return (
     <Transition
       id="NewChat"
-      name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
+      name={LAYERS_ANIMATION_NAME}
       renderCount={RENDER_COUNT}
       activeKey={content}
     >

src/components/left/settings/Settings.tsx

@@ -2,7 +2,7 @@ import React, { FC, memo, useCallback } from '../../../lib/teact/teact';
 
 import { SettingsScreens } from '../../../types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
+import { LAYERS_ANIMATION_NAME } from '../../../util/environment';
 import useFoldersReducer from '../../../hooks/reducers/useFoldersReducer';
 import useTwoFaReducer from '../../../hooks/reducers/useTwoFaReducer';
 
@@ -213,7 +213,7 @@ const Settings: FC<OwnProps> = ({
   return (
     <Transition
       id="Settings"
-      name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
+      name={LAYERS_ANIMATION_NAME}
       activeKey={currentScreen}
       renderCount={TRANSITION_RENDER_COUNT}
     >

src/styles/_variables.scss

@@ -140,6 +140,8 @@ $color-user-8: #faa774;
   --color-default-shadow: #72727240;
   --color-light-shadow: #7272722B;
 
+  --vh: 1vh;
+
   --border-radius-default: 0.75rem;
   --border-radius-default-small: 0.625rem;
   --border-radius-default-tiny: 0.375rem;
@@ -201,14 +203,16 @@ $color-user-8: #faa774;
   --layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
   --layer-blackout-opacity: 0.3;
 
-  --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
-
-  --select-transition: 200ms ease-out;
-
   // For some reason these parameters cause worse animation in desktop Chrome
   @media (max-width: 600px) {
     --layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
   }
 
-  --vh: 1vh;
+  --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
+
+  body.is-android {
+    --slide-transition: 200ms ease-in-out;
+  }
+
+  --select-transition: 200ms ease-out;
 }

src/util/environment.ts

@@ -60,6 +60,7 @@ export const IS_OPUS_SUPPORTED = Boolean((new Audio()).canPlayType('audio/ogg; c
 export const IS_CANVAS_FILTER_SUPPORTED = (
   !IS_TEST && 'filter' in (document.createElement('canvas').getContext('2d') || {})
 );
+export const LAYERS_ANIMATION_NAME = IS_ANDROID ? 'slide-fade' : IS_IOS ? 'slide-layers' : 'push-slide';
 
 export const DPR = window.devicePixelRatio || 1;