diff --git a/packages/react/src/components/Animation/Animation.tsx b/packages/react/src/components/Animation/Animation.tsx
index 0ab236522b..fd6cf2020b 100644
--- a/packages/react/src/components/Animation/Animation.tsx
+++ b/packages/react/src/components/Animation/Animation.tsx
@@ -8,17 +8,18 @@ import {
   childrenExist,
   StyledComponentProps,
   commonPropTypes,
-  ChildrenComponentProps,
   ShorthandFactory,
 } from '../../utils'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
 
-export interface AnimationProps
-  extends StyledComponentProps,
-    ChildrenComponentProps<React.ReactChild> {
+export type AnimationChildrenProp = (props: { classes: Record<string, string> }) => React.ReactNode
+
+export interface AnimationProps extends StyledComponentProps {
   /** Additional CSS class name(s) to apply.  */
   className?: string
 
+  children: AnimationChildrenProp | React.ReactChild
+
   /** The name for the animation that should be applied, defined in the theme. */
   name?: string
 
@@ -168,9 +169,13 @@ class Animation extends UIComponent<WithAsProp<AnimationProps>, any> {
       onExiting,
     } = this.props
 
-    const child =
-      childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
+    // const child =
+    //   childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
 
+    const child =
+      typeof children === 'function'
+        ? (children as AnimationChildrenProp)({ classes })
+        : childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
     return (
       <Transition
         in={visible}
@@ -185,7 +190,10 @@ class Animation extends UIComponent<WithAsProp<AnimationProps>, any> {
         onExiting={onExiting}
         onExited={onExited}
         {...unhandledProps}
-        className={cx(classes.root, child.props.className)}
+        className={cx(
+          classes.root,
+          typeof child === 'object' && (child as any).props && (child as any).props.className,
+        )}
       >
         {child}
       </Transition>
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 7245a05c52..b1872b11d6 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -8,6 +8,7 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import * as keyboardKey from 'keyboard-key'
 import * as _ from 'lodash'
+import cx from 'classnames'
 
 import {
   applyAccessibilityKeyHandlers,
@@ -37,6 +38,7 @@ import { createShorthandFactory, ShorthandFactory } from '../../utils/factories'
 import createReferenceFromContextClick from './createReferenceFromContextClick'
 import isRightClick from '../../utils/isRightClick'
 import PortalInner from '../Portal/PortalInner'
+import Animation from '../Animation/Animation'
 
 export type PopupEvents = 'click' | 'hover' | 'focus' | 'context'
 export type RestrictedClickEvents = 'click' | 'focus'
@@ -224,11 +226,13 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
 
     if (process.env.NODE_ENV !== 'production') {
       if (inline && trapFocus) {
+        // eslint-disable-next-line no-console
         console.warn(
           'Using "trapFocus" in inline popup leads to broken behavior for screen reader users.',
         )
       }
       if (!inline && autoFocus) {
+        // eslint-disable-next-line no-console
         console.warn(
           'Beware, "autoFocus" prop will just grab focus at the moment of mount and will not trap it. As user is able to TAB out from popup, better use "inline" prop to keep correct tab order.',
         )
@@ -250,13 +254,31 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
   }: RenderResultConfig<PopupProps>): React.ReactNode {
     const { inline, mountNode } = this.props
     const { open } = this.state
-    const popupContent = open && this.renderPopupContent(classes.popup, rtl, accessibility)
 
     return (
       <>
         {this.renderTrigger(accessibility)}
-        {open &&
-          (inline ? popupContent : <PortalInner mountNode={mountNode}>{popupContent}</PortalInner>)}
+        <Animation
+          name={open ? 'fadeEnterSlow' : 'fadeExitSlow'}
+          visible={open}
+          timeout={500}
+          mountOnEnter
+          unmountOnExit
+        >
+          {({ classes: animationClasses }) => {
+            return inline ? (
+              this.renderPopupContent(cx(classes.popup, animationClasses.root), rtl, accessibility)
+            ) : (
+              <PortalInner mountNode={mountNode}>
+                {this.renderPopupContent(
+                  cx(classes.popup, animationClasses.root),
+                  rtl,
+                  accessibility,
+                )}
+              </PortalInner>
+            )
+          }}
+        </Animation>
       </>
     )
   }
@@ -482,7 +504,13 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
         targetRef={
           this.rightClickReferenceObject || (target ? toRefObject(target) : this.triggerRef)
         }
-        children={this.renderPopperChildren.bind(this, popupPositionClasses, rtl, accessibility)}
+        children={this.renderPopperChildren.bind(
+          this,
+          popupPositionClasses,
+          rtl,
+          accessibility,
+          open,
+        )}
       />
     )
   }
@@ -491,6 +519,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     popupPositionClasses: string,
     rtl: boolean,
     accessibility: ReactAccessibilityBehavior,
+    open: boolean,
     { placement, scheduleUpdate }: PopperChildrenProps,
   ) => {
     const {
@@ -511,7 +540,10 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
         ...(rtl && { dir: 'rtl' }),
         ...accessibility.attributes.popup,
         ...accessibility.keyHandlers.popup,
-        className: popupPositionClasses,
+        className: cx(
+          popupPositionClasses,
+          typeof content === 'object' && (content as any).className,
+        ),
         ...this.getContentProps(),
         placement,
         pointing,
@@ -523,6 +555,10 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     })
 
     return (
+      // name={open ? 'spinner' : 'fadeExitSlow'}
+      // unmountOnExit
+      // mountOnEnter
+      // name={'spinner'}
       <Unstable_NestingAuto>
         {(getRefs, nestingRef) => (
           <>
diff --git a/packages/react/src/themes/teams/animations/fade.ts b/packages/react/src/themes/teams/animations/fade.ts
index 67dd9b5d13..df1dd3c6b4 100755
--- a/packages/react/src/themes/teams/animations/fade.ts
+++ b/packages/react/src/themes/teams/animations/fade.ts
@@ -1,6 +1,18 @@
 import { easeEasy } from './timingFunctions'
 
 const fadeInOutAnimations = {
+  spinner: {
+    keyframe: {
+      from: {
+        transform: 'rotate(0deg)',
+      },
+      to: {
+        transform: 'rotate(360deg)',
+      },
+    },
+    duration: '2s',
+    iterationCount: '1',
+  },
   // Basic Fade In Animation -- Fast
   fadeEnterFast: {
     keyframe: {