diff --git a/docs/content/Overlay.mdx b/docs/content/Overlay.mdx
index 685db5826de..5cc607101ac 100644
--- a/docs/content/Overlay.mdx
+++ b/docs/content/Overlay.mdx
@@ -73,8 +73,8 @@ render(<Demo />)
 | initialFocusRef | `React.RefObject<HTMLElement>`    | `undefined` | Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.                                                                                                                      |
 | anchorRef       | `React.RefObject<HTMLElement>`    | `undefined` | Required. Element the `Overlay` should be anchored to.                                                                                                                                                                                                                          |
 | returnFocusRef  | `React.RefObject<HTMLElement>`    | `undefined` | Required. Ref for the element to focus when the `Overlay` is closed.                                                                                                                                                                                                            |
-| onClickOutside  | `function`                        | `undefined` | Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`.                                                                                                                                      |
-| onEscape        | `function`                        | `undefined` | Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`.                                                                                                                                                  |
+| onClickOutside  | `function`                        | `undefined` | Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.                                                                                                                                                                 |
+| onEscape        | `function`                        | `undefined` | Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.                                                                                                                                                                             |
 | width           | `'small' │ 'medium' │ 'large' │ 'xlarge' │ 'xxlarge' │ 'auto'` |   `auto`    | Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`. |
 | height          | `'xsmall', 'small', 'medium', 'large', 'xlarge', 'auto'`               |   `auto`    | Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.                                                         |
-| visibility      | `'visible', 'hidden'`             |  `visible`  | Sets the visibility of the `Overlay`.                                                                                                                                                                                                                                           |
+| anchorSide      | `AnchorSide`                      |  undefined  | Optional. If provided, the Overlay will slide into position from the side of the anchor with a brief animation                                                                                                                                                                  |
diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx
index 436605f8e6a..baab28528ed 100644
--- a/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react'
+import React, {useCallback, useEffect, useMemo} from 'react'
 import Overlay, {OverlayProps} from '../Overlay'
 import {FocusTrapHookSettings, useFocusTrap} from '../hooks/useFocusTrap'
 import {FocusZoneHookSettings, useFocusZone} from '../hooks/useFocusZone'
@@ -124,9 +124,16 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
     [overlayRef.current]
   )
   const overlayPosition = useMemo(() => {
-    return position && {top: `${position.top}px`, left: `${position.left}px`}
+    return position && {top: `${position.top}px`, left: `${position.left}px`, anchorSide: position.anchorSide}
   }, [position])
 
+  useEffect(() => {
+    // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
+    if (!open && overlayRef.current) {
+      updateOverlayRef(null)
+    }
+  }, [open, overlayRef, updateOverlayRef])
+
   useFocusZone({
     containerRef: overlayRef,
     disabled: !open || !position,
@@ -141,7 +148,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
           ref: anchorRef,
           id: anchorId,
           'aria-labelledby': anchorId,
-          'aria-haspopup': 'listbox',
+          'aria-haspopup': 'true',
           tabIndex: 0,
           onClick: onAnchorClick,
           onKeyDown: onAnchorKeyDown
@@ -153,8 +160,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
           ignoreClickRefs={[anchorRef]}
           onEscape={onEscape}
           ref={updateOverlayRef}
-          role="listbox"
-          visibility={position ? 'visible' : 'hidden'}
+          role="none"
           height={height}
           width={width}
           {...overlayPosition}
diff --git a/src/Overlay.tsx b/src/Overlay.tsx
index 3696dfbccdc..06666d02a94 100644
--- a/src/Overlay.tsx
+++ b/src/Overlay.tsx
@@ -1,17 +1,19 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useRef} from 'react'
+import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
 import {get, COMMON, POSITION, SystemPositionProps, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
+import {AnchorSide} from './behaviors/anchoredPosition'
+import {useTheme} from './ThemeProvider'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap
   height?: keyof typeof heightMap
   maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
-  visibility?: 'visible' | 'hidden'
+  anchorSide?: AnchorSide
 }
 
 const heightMap = {
@@ -32,6 +34,21 @@ const widthMap = {
   xxlarge: '960px',
   auto: 'auto'
 }
+const animationDuration = 200
+
+function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y: number} {
+  if (anchorSide?.endsWith('bottom')) {
+    return {x: 0, y: -1}
+  } else if (anchorSide?.endsWith('top')) {
+    return {x: 0, y: 1}
+  } else if (anchorSide?.endsWith('right')) {
+    return {x: -1, y: 0}
+  } else if (anchorSide?.endsWith('left')) {
+    return {x: 1, y: 0}
+  }
+
+  return {x: 0, y: 0}
+}
 
 const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SystemPositionProps & SxProp>`
   background-color: ${get('colors.bg.overlay')};
@@ -44,18 +61,17 @@ const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & System
   width: ${props => widthMap[props.width || 'auto']};
   border-radius: 12px;
   overflow: hidden;
-  animation: overlay-appear 200ms ${get('animation.easeOutCubic')};
+  animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};
 
   @keyframes overlay-appear {
     0% {
       opacity: 0;
-      transform: translateY(${get('space.2')});
     }
     100% {
       opacity: 1;
     }
   }
-  visibility: ${props => props.visibility || 'visible'};
+
   :focus {
     outline: none;
   }
@@ -69,9 +85,8 @@ export type OverlayProps = {
   returnFocusRef: React.RefObject<HTMLElement>
   onClickOutside: (e: TouchOrMouseEvent) => void
   onEscape: (e: KeyboardEvent) => void
-  visibility?: 'visible' | 'hidden'
   [additionalKey: string]: unknown
-} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>
+} & Omit<ComponentProps<typeof StyledOverlay>, keyof SystemPositionProps>
 
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
@@ -80,30 +95,33 @@ export type OverlayProps = {
  * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
  * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
  * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
- * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`.
- * @param onEscape Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`.
+ * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
+ * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
  * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
  * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
  * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
- * @param visibility Sets the visibility of the `Overlay`
+ * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
  */
 const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
   (
     {
       onClickOutside,
-      role = 'dialog',
+      role = 'none',
       initialFocusRef,
       returnFocusRef,
       ignoreClickRefs,
       onEscape,
-      visibility,
       height,
+      anchorSide,
       ...rest
     },
     forwardedRef
   ): ReactElement => {
     const overlayRef = useRef<HTMLDivElement>(null)
     const combinedRef = useCombinedRefs(overlayRef, forwardedRef)
+    const {theme} = useTheme()
+    const slideAnimationDistance = parseInt(get('space.2')(theme).replace('px', ''))
+    const slideAnimationEasing = get('animation.easeOutCubic')(theme)
 
     useOverlay({
       overlayRef,
@@ -120,16 +138,25 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
       }
     }, [height, combinedRef])
 
+    useLayoutEffect(() => {
+      const {x, y} = getSlideAnimationStartingVector(anchorSide)
+      if ((!x && !y) || !overlayRef.current?.animate) {
+        return
+      }
+
+      // JS animation is required because Safari does not allow css animations to start paused and then run
+      overlayRef.current.animate(
+        {transform: [`translate(${slideAnimationDistance * x}px, ${slideAnimationDistance * y}px)`, `translate(0, 0)`]},
+        {
+          duration: animationDuration,
+          easing: slideAnimationEasing
+        }
+      )
+    }, [anchorSide, slideAnimationDistance, slideAnimationEasing])
+
     return (
       <Portal>
-        <StyledOverlay
-          aria-modal="true"
-          role={role}
-          height={height}
-          {...rest}
-          ref={combinedRef}
-          visibility={visibility}
-        />
+        <StyledOverlay height={height} role={role} {...rest} ref={combinedRef} />
       </Portal>
     )
   }
diff --git a/src/__tests__/AnchoredOverlay.tsx b/src/__tests__/AnchoredOverlay.tsx
index 90e9aaff497..66d6baef5c2 100644
--- a/src/__tests__/AnchoredOverlay.tsx
+++ b/src/__tests__/AnchoredOverlay.tsx
@@ -5,6 +5,9 @@ import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
 import {Button} from '../index'
+import theme from '../theme'
+import BaseStyles from '../BaseStyles'
+import {ThemeProvider} from '../ThemeProvider'
 expect.extend(toHaveNoViolations)
 
 type TestComponentSettings = {
@@ -34,14 +37,18 @@ const AnchoredOverlayTestComponent = ({
     [onCloseCallback]
   )
   return (
-    <AnchoredOverlay
-      open={open}
-      onOpen={onOpen}
-      onClose={onClose}
-      renderAnchor={props => <Button {...props}>Anchor Button</Button>}
-    >
-      Contents
-    </AnchoredOverlay>
+    <ThemeProvider theme={theme}>
+      <BaseStyles>
+        <AnchoredOverlay
+          open={open}
+          onOpen={onOpen}
+          onClose={onClose}
+          renderAnchor={props => <Button {...props}>Anchor Button</Button>}
+        >
+          <button type="button">Focusable Child</button>
+        </AnchoredOverlay>
+      </BaseStyles>
+    </ThemeProvider>
   )
 }
 
@@ -78,7 +85,7 @@ describe('AnchoredOverlay', () => {
     const anchoredOverlay = HTMLRender(
       <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />
     )
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="listbox"]')!
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
     fireEvent.click(anchor)
 
     expect(mockOpenCallback).toHaveBeenCalledTimes(1)
@@ -92,7 +99,7 @@ describe('AnchoredOverlay', () => {
     const anchoredOverlay = HTMLRender(
       <AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback} />
     )
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="listbox"]')!
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]')!
     fireEvent.keyDown(anchor, {key: ' '})
 
     expect(mockOpenCallback).toHaveBeenCalledTimes(1)
@@ -127,7 +134,7 @@ describe('AnchoredOverlay', () => {
         onCloseCallback={mockCloseCallback}
       />
     )
-    const overlay = await anchoredOverlay.findByRole('listbox')
+    const overlay = await anchoredOverlay.findByRole('none')
     fireEvent.keyDown(overlay, {key: 'Escape'})
 
     expect(mockOpenCallback).toHaveBeenCalledTimes(0)
diff --git a/src/__tests__/Overlay.tsx b/src/__tests__/Overlay.tsx
index 21ef6374335..9976156665f 100644
--- a/src/__tests__/Overlay.tsx
+++ b/src/__tests__/Overlay.tsx
@@ -3,6 +3,9 @@ import {Overlay, Position, Flex, Text, ButtonDanger, Button} from '..'
 import {render, cleanup, waitFor, fireEvent, act} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {axe, toHaveNoViolations} from 'jest-axe'
+import theme from '../theme'
+import BaseStyles from '../BaseStyles'
+import {ThemeProvider} from '../ThemeProvider'
 
 expect.extend(toHaveNoViolations)
 
@@ -22,30 +25,34 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
     }
   }
   return (
-    <Position position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        open overlay
-      </Button>
-      <Button>outside</Button>
-      {isOpen ? (
-        <Overlay
-          initialFocusRef={initialFocus === 'button' ? confirmButtonRef : undefined}
-          returnFocusRef={buttonRef}
-          ignoreClickRefs={[buttonRef]}
-          onEscape={closeOverlay}
-          onClickOutside={closeOverlay}
-          width="small"
-        >
-          <Flex flexDirection="column" p={2}>
-            <Text>Are you sure?</Text>
-            <ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
-            <Button onClick={closeOverlay} ref={confirmButtonRef}>
-              Confirm
-            </Button>
-          </Flex>
-        </Overlay>
-      ) : null}
-    </Position>
+    <ThemeProvider theme={theme}>
+      <BaseStyles>
+        <Position position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
+          <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+            open overlay
+          </Button>
+          <Button>outside</Button>
+          {isOpen ? (
+            <Overlay
+              initialFocusRef={initialFocus === 'button' ? confirmButtonRef : undefined}
+              returnFocusRef={buttonRef}
+              ignoreClickRefs={[buttonRef]}
+              onEscape={closeOverlay}
+              onClickOutside={closeOverlay}
+              width="small"
+            >
+              <Flex flexDirection="column" p={2}>
+                <Text>Are you sure?</Text>
+                <ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
+                <Button onClick={closeOverlay} ref={confirmButtonRef}>
+                  Confirm
+                </Button>
+              </Flex>
+            </Overlay>
+          ) : null}
+        </Position>
+      </BaseStyles>
+    </ThemeProvider>
   )
 }
 
diff --git a/src/__tests__/__snapshots__/ActionMenu.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.tsx.snap
index a92e9626f63..43aaddf600d 100644
--- a/src/__tests__/__snapshots__/ActionMenu.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.tsx.snap
@@ -68,7 +68,7 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 <button
-  aria-haspopup="listbox"
+  aria-haspopup="true"
   aria-label="menu"
   aria-labelledby="__primer_id_10000"
   className="c0"
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap
index 52b524b1beb..9a0537de3c8 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap
@@ -2,6 +2,12 @@
 
 exports[`AnchoredOverlay renders consistently 1`] = `
 .c0 {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  line-height: 1.5;
+  color: #24292e;
+}
+
+.c1 {
   position: relative;
   display: inline-block;
   padding: 6px 16px;
@@ -29,53 +35,60 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
-.c0:hover {
+.c1:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c0:focus {
+.c1:focus {
   outline: none;
 }
 
-.c0:disabled {
+.c1:disabled {
   cursor: default;
 }
 
-.c0:disabled svg {
+.c1:disabled svg {
   opacity: 0.6;
 }
 
-.c0:hover {
+.c1:hover {
   background-color: #f3f4f6;
   border-color: rgba(27,31,35,0.15);
 }
 
-.c0:focus {
+.c1:focus {
   border-color: rgba(27,31,35,0.15);
   box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
 }
 
-.c0:active {
+.c1:active {
   background-color: hsla(220,14%,94%,1);
   box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: #959da5;
   background-color: #fafbfc;
   border-color: rgba(27,31,35,0.15);
 }
 
-<button
-  aria-haspopup="listbox"
-  aria-labelledby="__primer_id_10000"
+<div
   className="c0"
-  id="__primer_id_10000"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
+  color="text.primary"
+  data-portal-root={true}
+  fontFamily="normal"
 >
-  Anchor Button
-</button>
+  <button
+    aria-haspopup="true"
+    aria-labelledby="__primer_id_10000"
+    className="c1"
+    id="__primer_id_10000"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+  >
+    Anchor Button
+  </button>
+</div>
 `;
diff --git a/src/__tests__/__snapshots__/DropdownMenu.tsx.snap b/src/__tests__/__snapshots__/DropdownMenu.tsx.snap
index 0ed5d845df6..0324c63d005 100644
--- a/src/__tests__/__snapshots__/DropdownMenu.tsx.snap
+++ b/src/__tests__/__snapshots__/DropdownMenu.tsx.snap
@@ -72,7 +72,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 }
 
 <button
-  aria-haspopup="listbox"
+  aria-haspopup="true"
   aria-labelledby="__primer_id_10000"
   className="c0"
   id="__primer_id_10000"
diff --git a/src/__tests__/__snapshots__/SelectPanel.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.tsx.snap
index 9adebae1279..75b7261e6cb 100644
--- a/src/__tests__/__snapshots__/SelectPanel.tsx.snap
+++ b/src/__tests__/__snapshots__/SelectPanel.tsx.snap
@@ -84,7 +84,7 @@ exports[`SelectPanel renders consistently 1`] = `
   fontFamily="normal"
 >
   <button
-    aria-haspopup="listbox"
+    aria-haspopup="true"
     aria-labelledby="__primer_id_10000"
     className="c1"
     id="__primer_id_10000"
diff --git a/src/behaviors/anchoredPosition.ts b/src/behaviors/anchoredPosition.ts
index 004c6726d56..e9f2159fd0e 100644
--- a/src/behaviors/anchoredPosition.ts
+++ b/src/behaviors/anchoredPosition.ts
@@ -109,6 +109,12 @@ interface Position {
   left: number
 }
 
+export interface AnchorPosition {
+  top: number
+  left: number
+  anchorSide: AnchorSide
+}
+
 interface BoxPosition extends Size, Position {}
 
 /**
@@ -125,7 +131,7 @@ export function getAnchoredPosition(
   floatingElement: Element,
   anchorElement: Element | DOMRect,
   settings: Partial<PositionSettings> = {}
-): {top: number; left: number} {
+): AnchorPosition {
   const parentElement = getPositionedParent(floatingElement)
   const clippingRect = getClippingRect(parentElement)
 
@@ -258,7 +264,7 @@ function pureCalculateAnchoredPosition(
   floatingRect: Size,
   anchorRect: BoxPosition,
   {side, align, allowOutOfBounds, anchorOffset, alignmentOffset}: PositionSettings
-): {top: number; left: number} {
+): AnchorPosition {
   // Compute the relative viewport rect, to bring it into the same coordinate space as `pos`
   const relativeViewportRect: BoxPosition = {
     top: viewportRect.top - relativePosition.top,
@@ -268,6 +274,7 @@ function pureCalculateAnchoredPosition(
   }
 
   let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset)
+  let anchorSide = side
   pos.top -= relativePosition.top
   pos.left -= relativePosition.left
 
@@ -290,6 +297,7 @@ function pureCalculateAnchoredPosition(
         pos = calculatePosition(floatingRect, anchorRect, nextSide, align, anchorOffset, alignmentOffset)
         pos.top -= relativePosition.top
         pos.left -= relativePosition.left
+        anchorSide = nextSide
       }
     }
     // At this point we've flipped the position if applicable. Now just nudge until it's on-screen.
@@ -311,7 +319,8 @@ function pureCalculateAnchoredPosition(
       }
     }
   }
-  return pos
+
+  return {...pos, anchorSide}
 }
 
 /**
diff --git a/src/hooks/useAnchoredPosition.ts b/src/hooks/useAnchoredPosition.ts
index 7ba0a40a4fb..2ae88526a60 100644
--- a/src/hooks/useAnchoredPosition.ts
+++ b/src/hooks/useAnchoredPosition.ts
@@ -1,5 +1,5 @@
 import React from 'react'
-import {PositionSettings, getAnchoredPosition} from '../behaviors/anchoredPosition'
+import {PositionSettings, getAnchoredPosition, AnchorPosition} from '../behaviors/anchoredPosition'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
@@ -22,12 +22,12 @@ export function useAnchoredPosition(
 ): {
   floatingElementRef: React.RefObject<Element>
   anchorElementRef: React.RefObject<Element>
-  position: {top: number; left: number} | undefined
+  position: AnchorPosition | undefined
 } {
   const floatingElementRef = useProvidedRefOrCreate(settings?.floatingElementRef)
   const anchorElementRef = useProvidedRefOrCreate(settings?.anchorElementRef)
-  const [position, setPosition] = React.useState<{top: number; left: number} | undefined>(undefined)
-  React.useEffect(() => {
+  const [position, setPosition] = React.useState<AnchorPosition | undefined>(undefined)
+  React.useLayoutEffect(() => {
     if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
       setPosition(getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings))
     } else {
diff --git a/src/hooks/useCombinedRefs.ts b/src/hooks/useCombinedRefs.ts
index 0fef707de7d..0eedc6beb5e 100644
--- a/src/hooks/useCombinedRefs.ts
+++ b/src/hooks/useCombinedRefs.ts
@@ -11,7 +11,7 @@ import React, {ForwardedRef, useRef} from 'react'
 export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]) {
   const combinedRef = useRef<T | null>(null)
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     function setRefs(current: T | null = null) {
       for (const ref of refs) {
         if (!ref) {