diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index 87f9d4ca4..02b7323be 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -153,7 +153,6 @@ $session-margin-md: 15px;
 $session-margin-lg: 20px;
 
 // Animations
-$session-transition-duration: 0.25s;
 
 @keyframes fadein {
   from {
diff --git a/stylesheets/_session_slider.scss b/stylesheets/_session_slider.scss
index 81feb400c..db3b56efa 100644
--- a/stylesheets/_session_slider.scss
+++ b/stylesheets/_session_slider.scss
@@ -172,13 +172,13 @@
 }
 .rc-slider-tooltip-zoom-down-enter,
 .rc-slider-tooltip-zoom-down-appear {
-  animation-duration: 0.3s;
+  animation-duration: var(--default-duration);
   animation-fill-mode: both;
   display: block !important;
   animation-play-state: paused;
 }
 .rc-slider-tooltip-zoom-down-leave {
-  animation-duration: 0.3s;
+  animation-duration: var(--default-duration);
   animation-fill-mode: both;
   display: block !important;
   animation-play-state: paused;
diff --git a/ts/components/calling/CallButtons.tsx b/ts/components/calling/CallButtons.tsx
index 20aca8886..74ca159b9 100644
--- a/ts/components/calling/CallButtons.tsx
+++ b/ts/components/calling/CallButtons.tsx
@@ -355,7 +355,7 @@ const StyledCallWindowControls = styled.div<{ isFullScreen: boolean; makeVisible
   margin-right: auto;
   left: 0;
   right: 0;
-  transition: all 0.25s ease-in-out;
+  transition: all var(--default-duration) ease-in-out;
 
   display: flex;
   justify-content: center;
diff --git a/ts/components/conversation/composition/UserMentions.tsx b/ts/components/conversation/composition/UserMentions.tsx
index e5c7aeef5..e82ed30d3 100644
--- a/ts/components/conversation/composition/UserMentions.tsx
+++ b/ts/components/conversation/composition/UserMentions.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SuggestionDataItem } from 'react-mentions';
-import { MemberListItem } from '../../MemberListItem';
 import { HTMLDirection } from '../../../util/i18n';
+import { MemberListItem } from '../../MemberListItem';
 
 const listRTLStyle = { position: 'absolute', bottom: '0px', right: '100%' };
 
@@ -21,7 +21,7 @@ export const styleForCompositionBoxSuggestions = (dir: HTMLDirection = 'ltr') =>
         paddingBottom: '5px',
         backgroundColor: 'var(--suggestions-background-color)',
         color: 'var(--suggestions-text-color)',
-        transition: '0.25s',
+        transition: 'var(--default-duration)',
 
         '&focused': {
           backgroundColor: 'var(--suggestions-background-hover-color)',
diff --git a/ts/components/conversation/right-panel/RightPanel.tsx b/ts/components/conversation/right-panel/RightPanel.tsx
index d3b28dc10..8dc6c1b3f 100644
--- a/ts/components/conversation/right-panel/RightPanel.tsx
+++ b/ts/components/conversation/right-panel/RightPanel.tsx
@@ -13,7 +13,7 @@ export const StyledRightPanelContainer = styled.div`
   height: var(--right-panel-height);
   right: 0vw;
 
-  transition: transform 0.3s ease-in-out;
+  transition: transform var(--default-duration) ease-in-out;
   transform: translateX(100%);
   will-change: transform;
   width: var(--right-panel-width);
@@ -25,7 +25,7 @@ export const StyledRightPanelContainer = styled.div`
 
   &.show {
     transform: none;
-    transition: transform 0.3s ease-in-out;
+    transition: transform var(--default-duration) ease-in-out;
     z-index: 3;
     visibility: visible;
   }
diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx
index 78a807474..198da2ff4 100644
--- a/ts/components/leftpane/LeftPaneSectionHeader.tsx
+++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx
@@ -28,7 +28,7 @@ const StyledProgressBarContainer = styled.div`
 const StyledProgressBarInner = styled.div`
   background: var(--primary-color);
   width: 90%;
-  transition: width 0.5s ease-in;
+  transition: width var(--default-duration) ease-in;
   height: 100%;
 `;
 
diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
index 210e512a2..d162a5fa7 100644
--- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
+++ b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
@@ -14,7 +14,7 @@ const StyledActionRow = styled.button`
   display: flex;
   align-items: center;
   border-bottom: 1px var(--border-color) solid;
-  transition-duration: 0.25s;
+  transition-duration: var(--default-duration);
   width: 100%;
 
   &:first-child {
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index fbd4d4948..d0743586c 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -1,3 +1,4 @@
+import { isTestIntegration } from '../shared/env_vars';
 import { hexColorToRGB } from '../util/hexColorToRGB';
 import { COLORS } from './constants/colors';
 
@@ -126,7 +127,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--composition-container-height': '60px',
   '--search-input-height': '34px',
 
-  '--default-duration': '0.25s',
+  '--default-duration': isTestIntegration() ? '0s' : '0.25s',
 
   '--green-color': COLORS.PRIMARY.GREEN,
   '--blue-color': COLORS.PRIMARY.BLUE,