diff --git a/packages/menus/package.json b/packages/menus/package.json
index 29e54397928..e01be9fa115 100644
--- a/packages/menus/package.json
+++ b/packages/menus/package.json
@@ -38,7 +38,6 @@
   "devDependencies": {
     "@zendeskgarden/css-arrows": "3.1.1",
     "@zendeskgarden/css-menus": "8.1.1",
-    "@zendeskgarden/css-variables": "5.2.3",
     "@zendeskgarden/react-theming": "^3.2.1",
     "@zendeskgarden/svg-icons": "5.0.0"
   },
diff --git a/packages/menus/src/views/MenuView.js b/packages/menus/src/views/MenuView.js
index bece8bd6685..56482f9b118 100644
--- a/packages/menus/src/views/MenuView.js
+++ b/packages/menus/src/views/MenuView.js
@@ -7,12 +7,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 import classNames from 'classnames';
 import { retrieveTheme, isRtl } from '@zendeskgarden/react-theming';
 import MenuStyles from '@zendeskgarden/css-menus';
 import ArrowStyles from '@zendeskgarden/css-arrows';
-import { zdSpacing } from '@zendeskgarden/css-variables';
 
 const COMPONENT_ID = 'menus.menu_view';
 
@@ -32,26 +31,6 @@ const PLACEMENT = {
   LEFT_END: 'left-end'
 };
 
-const topAnimation = keyframes`
-  0% {
-    margin-top: ${zdSpacing};
-  }
-
-  100% {
-    margin-top: 8px;
-  }
-`;
-
-const leftAnimation = keyframes`
-  0% {
-    margin-left: ${zdSpacing};
-  }
-
-  100% {
-    margin-left: 8px;
-  }
-`;
-
 const shouldShowArrow = ({ arrow, placement }) => {
   return arrow && placement;
 };
@@ -94,46 +73,6 @@ const retrieveMenuMargin = ({ arrow, placement }) => {
   return '';
 };
 
-/**
- * We must provide our own top and left animation to allow
- * Popper.js to position correctly
- */
-const retrieveAnimation = ({ animate, placement }) => {
-  if (!animate) {
-    return '';
-  }
-
-  if (
-    placement === PLACEMENT.TOP ||
-    placement === PLACEMENT.TOP_START ||
-    placement === PLACEMENT.TOP_END
-  ) {
-    return `animation: ${topAnimation}`;
-  }
-
-  if (
-    placement === PLACEMENT.LEFT ||
-    placement === PLACEMENT.LEFT_START ||
-    placement === PLACEMENT.LEFT_END
-  ) {
-    return `animation: ${leftAnimation}`;
-  }
-
-  return '';
-};
-
-const shouldAnimate = ({ animate, placement }) => {
-  return (
-    animate &&
-    placement !== PLACEMENT.TOP &&
-    placement !== PLACEMENT.TOP_START &&
-    placement !== PLACEMENT.TOP_END &&
-    placement !== PLACEMENT.LEFT &&
-    placement !== PLACEMENT.LEFT_START &&
-    placement !== PLACEMENT.LEFT_END
-  );
-};
-
 /**
  * Accepts all `<ul>` props
  */
@@ -164,7 +103,7 @@ const StyledMenuView = styled.ul.attrs({
         props.placement === PLACEMENT.BOTTOM_END,
 
       // State
-      [MenuStyles['is-open']]: shouldAnimate(props),
+      [MenuStyles['is-open']]: props.animate,
       [MenuStyles['is-hidden']]: props.hidden,
 
       // Arrows
@@ -187,7 +126,6 @@ const StyledMenuView = styled.ul.attrs({
     })
 })`
   && {
-    ${retrieveAnimation};
     position: relative;
   }
 
diff --git a/packages/menus/src/views/MenuView.spec.js b/packages/menus/src/views/MenuView.spec.js
index f7c80e484de..e7343b67cf0 100644
--- a/packages/menus/src/views/MenuView.spec.js
+++ b/packages/menus/src/views/MenuView.spec.js
@@ -35,18 +35,6 @@ describe('MenuView', () => {
 
       expect(wrapper).toMatchSnapshot();
     });
-
-    it('renders custom top animation correctly', () => {
-      const wrapper = mountWithTheme(<MenuView animate placement="top" />);
-
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('renders custom left animation correctly', () => {
-      const wrapper = mountWithTheme(<MenuView animate placement="left" />);
-
-      expect(wrapper).toMatchSnapshot();
-    });
   });
 
   describe('Directional styling', () => {
diff --git a/packages/menus/src/views/__snapshots__/MenuView.spec.js.snap b/packages/menus/src/views/__snapshots__/MenuView.spec.js.snap
index dcca5754f50..3c5743cc43a 100644
--- a/packages/menus/src/views/__snapshots__/MenuView.spec.js.snap
+++ b/packages/menus/src/views/__snapshots__/MenuView.spec.js.snap
@@ -1046,86 +1046,6 @@ exports[`MenuView Renders renders animation styling correctly 1`] = `
 </MenuView>
 `;
 
-exports[`MenuView Renders renders custom left animation correctly 1`] = `
-.c1.c1 {
-  -webkit-animation: DWTzU;
-  animation: DWTzU;
-  position: relative;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c0 {
-  margin-right: 4px;
-}
-
-<MenuView
-  animate={true}
-  placement="left"
->
-  <MenuView__MenuWrapper
-    placement="left"
-  >
-    <div
-      className="c0"
-    >
-      <MenuView__StyledMenuView
-        animate={true}
-        placement="left"
-      >
-        <ul
-          className="c-menu c-menu--left c-arrow--r c1"
-          data-garden-id="menus.menu_view"
-          data-garden-version="version"
-        />
-      </MenuView__StyledMenuView>
-    </div>
-  </MenuView__MenuWrapper>
-</MenuView>
-`;
-
-exports[`MenuView Renders renders custom top animation correctly 1`] = `
-.c1.c1 {
-  -webkit-animation: dtfwqU;
-  animation: dtfwqU;
-  position: relative;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c0 {
-  margin-bottom: 4px;
-}
-
-<MenuView
-  animate={true}
-  placement="top"
->
-  <MenuView__MenuWrapper
-    placement="top"
-  >
-    <div
-      className="c0"
-    >
-      <MenuView__StyledMenuView
-        animate={true}
-        placement="top"
-      >
-        <ul
-          className="c-menu c-menu--up c-arrow--b c1"
-          data-garden-id="menus.menu_view"
-          data-garden-version="version"
-        />
-      </MenuView__StyledMenuView>
-    </div>
-  </MenuView__MenuWrapper>
-</MenuView>
-`;
-
 exports[`MenuView renders RTL styling correctly 1`] = `
 .c0.c0 {
   position: relative;