CHANGELOG.md

@@ -5,6 +5,12 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.15.0](https://github.com/sanity-io/ui/compare/v2.14.5...v2.15.0) (2025-03-03)
+
+### Features
+
+- improve toast, popover, and tooltip motion ([#1633](https://github.com/sanity-io/ui/issues/1633)) ([7d0139c](https://github.com/sanity-io/ui/commit/7d0139c399865cefe849154cee41429da15443cc))
+
 ## [2.14.5](https://github.com/sanity-io/ui/compare/v2.14.4...v2.14.5) (2025-03-03)
 
 ### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.14.5",
+  "version": "2.15.0",
   "keywords": [
     "sanity",
     "ui",
@@ -135,21 +135,21 @@
     "@sanity/pkg-utils": "^6.13.4",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.30",
-    "@storybook/addon-a11y": "^8.6.2",
-    "@storybook/addon-docs": "^8.6.2",
-    "@storybook/addon-essentials": "^8.6.2",
-    "@storybook/addon-interactions": "^8.6.2",
-    "@storybook/addon-links": "^8.6.2",
-    "@storybook/addon-mdx-gfm": "^8.6.2",
-    "@storybook/addon-storysource": "^8.6.2",
-    "@storybook/addon-themes": "^8.6.2",
-    "@storybook/blocks": "^8.6.2",
-    "@storybook/manager-api": "^8.6.2",
-    "@storybook/react": "^8.6.2",
-    "@storybook/react-vite": "^8.6.2",
-    "@storybook/test": "^8.6.2",
-    "@storybook/theming": "^8.6.2",
+    "@sanity/ui-workshop": "^2.0.31",
+    "@storybook/addon-a11y": "^8.6.3",
+    "@storybook/addon-docs": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-links": "^8.6.3",
+    "@storybook/addon-mdx-gfm": "^8.6.3",
+    "@storybook/addon-storysource": "^8.6.3",
+    "@storybook/addon-themes": "^8.6.3",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/manager-api": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-vite": "^8.6.3",
+    "@storybook/test": "^8.6.3",
+    "@storybook/theming": "^8.6.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -195,7 +195,7 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.3",
     "start-server-and-test": "^2.0.10",
-    "storybook": "^8.6.2",
+    "storybook": "^8.6.3",
     "styled-components": "^6.1.15",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.7.3",

src/core/components/toast/styles.ts

@@ -1,64 +1,76 @@
-import {styled, keyframes, css} from 'styled-components'
+import {styled} from 'styled-components'
 import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
-import {Flex} from '../../primitives'
-import {ThemeProps} from '../../styles'
+import {Card, Flex} from '../../primitives'
+import type {ButtonTone} from '../../types'
+
+const LOADING_BAR_HEIGHT = 2
+
+export const STATUS_CARD_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} satisfies {[key: string]: ThemeColorStateToneKey}
+
+export const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} satisfies {[key: string]: ButtonTone}
 
 export const TextBox = styled(Flex)`
   overflow-x: auto;
 `
 
-const loadingAnimation = keyframes`
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
+export const StyledToast = styled(Card)`
+  pointer-events: all;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  overflow: clip;
+
+  &[data-has-duration] {
+    padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);
   }
 `
 
-const LOADING_BAR_HEIGHT = 2
-
-export function rootStyles(
-  props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
-): ReturnType<typeof css> {
-  const {color} = getTheme_v2(props.theme)
-
-  const loadingBarColor = color.button.default[props.tone].enabled.bg
-
-  if (!props.$duration)
-    return css`
-      pointer-events: all;
-      & > * {
-        opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        will-change: opacity;
-      }
-    `
+export const LoadingBar = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: 0px;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  pointer-events: none;
+  z-index: -1;
+  overflow: hidden;
+  overflow: clip;
+  background: transparent;
+  align-items: flex-end;
+  will-change: opacity;
+`
 
-  return css`
-    pointer-events: all;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    overflow: clip;
-    padding-bottom: ${LOADING_BAR_HEIGHT}px;
-    &::before {
-      content: '';
-      position: absolute;
-      bottom: 0px;
-      height: ${LOADING_BAR_HEIGHT}px;
-      background: ${loadingBarColor};
-      animation-name: ${loadingAnimation};
-      animation-duration: ${props.$duration}ms;
-      animation-fill-mode: both;
-      animation-timing-function: linear;
-      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-      will-change: width;
-    }
+export const LoadingBarMask = styled(Card)`
+  position: absolute;
+  top: 0;
+  left: -${LOADING_BAR_HEIGHT}px;
+  right: -${LOADING_BAR_HEIGHT}px;
+  bottom: ${LOADING_BAR_HEIGHT}px;
+  z-index: 1;
+`
 
-    & > * {
-      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-      will-change: opacity;
-    }
-  `
+type LoadingBarProgressProps = Omit<React.ComponentProps<typeof Card>, 'tone'> & {
+  tone: ThemeColorStateToneKey
 }
+export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`
+  display: block;
+  height: 100%;
+  width: 100%;
+  transform-origin: 0% 50%;
+  background-color: ${(props) => {
+    const {color} = getTheme_v2(props.theme)
+
+    return color.button.default[props.tone].enabled.bg
+  }};
+`

src/core/components/toast/toast.tsx

@@ -1,48 +1,42 @@
 import {CloseIcon} from '@sanity/icons'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
-import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
-import {ThemeProps} from '../../styles'
-import type {ButtonTone} from '../../types'
-import {rootStyles, TextBox} from './styles'
+import {motion, type Variant, type Variants} from 'framer-motion'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Box, Button, Flex, Stack, Text} from '../../primitives'
+
+import {
+  LoadingBar,
+  LoadingBarProgress,
+  BUTTON_TONE,
+  STATUS_CARD_TONE,
+  TextBox,
+  StyledToast,
+  LoadingBarMask,
+} from './styles'
 
 /**
  * @public
  */
 export interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
-  onClose?: () => void
+  onClose: () => void
   radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
+  updatedAt?: number
 }
 
-const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} as const
-
-const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
-
 const ROLES = {
   error: 'alert',
   warning: 'alert',
   success: 'alert',
   info: 'alert',
 } as const
 
-const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
-  rootStyles,
-)
+// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
+// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
+const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
 
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
@@ -52,25 +46,63 @@ const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneK
  * @public
  */
 export function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      | 'as'
+      | 'height'
+      | 'ref'
+      | 'title'
+      | 'onAnimationStart'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onDrag'
+    >,
 ): React.JSX.Element {
-  const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
+  const {
+    closable,
+    description,
+    duration,
+    onClose,
+    radius = 3,
+    title,
+    status,
+    updatedAt,
+    ...restProps
+  } = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  const visualDuration: number = prefersReducedMotion ? 0 : 0.26
+  const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
+
+  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
+  const initial: ContainerVariants[] = ['hidden', 'initial']
+  const animate: ContainerVariants[] = ['visible', 'slideIn']
+  const exit: ContainerVariants[] = ['hidden', 'slideOut']
+
   return (
-    <StyledToast
+    <MotionToast
       data-ui="Toast"
       role={role}
       {...restProps}
-      marginTop={3}
+      data-has-duration={hasDuration ? '' : undefined}
+      custom={visualDuration}
       radius={radius}
       shadow={2}
       tone={cardTone}
-      $duration={duration}
+      forwardedAs="li"
+      layout="position"
+      variants={container}
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      transition={transition}
     >
-      <Flex align="flex-start">
+      <MotionFlex align="flex-start" variants={content} transition={transition}>
         <TextBox flex={1} padding={3}>
           <Stack space={3}>
             {title && (
@@ -79,9 +111,9 @@ export function Toast(
               </Text>
             )}
             {description && (
-              <Text muted size={1}>
+              <MotionText muted size={1} variants={content} transition={transition}>
                 {description}
-              </Text>
+              </MotionText>
             )}
           </Stack>
         </TextBox>
@@ -99,9 +131,66 @@ export function Toast(
             />
           </Box>
         )}
-      </Flex>
-    </StyledToast>
+      </MotionFlex>
+      {hasDuration && (
+        <MotionLoadingBar variants={content} transition={transition}>
+          <LoadingBarMask tone={cardTone} radius={radius} />
+          <MotionLoadingBarProgress
+            key={`progress-${updatedAt}`}
+            tone={cardTone}
+            initial={{scaleX: 0}}
+            animate={{scaleX: 1}}
+            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
+            onAnimationComplete={onClose}
+          />
+        </MotionLoadingBar>
+      )}
+    </MotionToast>
   )
 }
 
 Toast.displayName = 'Toast'
+
+const container = {
+  initial: {y: 32, scale: 0.5, zIndex: 1},
+  hidden: {opacity: 0},
+  visible: (visualDuration: number) => {
+    if (!visualDuration) return {opacity: 1}
+
+    return {
+      opacity: 1,
+      transition: {
+        when: 'beforeChildren',
+        staggerChildren: visualDuration / 3,
+        duration: visualDuration / 3,
+      },
+    }
+  },
+  slideIn: {
+    y: 0,
+    scale: 1,
+  },
+  slideOut: {
+    zIndex: 0,
+    scale: 0.75,
+  },
+} satisfies Variants
+type ContainerVariants = keyof typeof container
+
+const content = {
+  initial: {
+    willChange: 'transform',
+  },
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+  },
+} satisfies Partial<Record<ContainerVariants, Variant>>
+
+const MotionToast = motion.create(StyledToast)
+const MotionFlex = motion.create(Flex)
+const MotionText = motion.create(Text)
+const MotionLoadingBar = motion.create(LoadingBar)
+const MotionLoadingBarProgress = motion.create(LoadingBarProgress)

src/core/components/toast/toastLayer.tsx

@@ -0,0 +1,50 @@
+import {styled} from 'styled-components'
+import {Grid} from '../../primitives/grid'
+import {useLayer} from '../../utils'
+
+/**
+ * @public
+ */
+export interface ToastLayerProps {
+  children: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  gap?: number | number[]
+}
+
+/**
+ * @internal
+ */
+export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
+  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
+  const {zIndex} = useLayer()
+
+  return (
+    <StyledLayer
+      forwardedAs="ul"
+      data-ui="ToastProvider"
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      gap={gap}
+      columns={1}
+      style={{zIndex}}
+    >
+      {children}
+    </StyledLayer>
+  )
+}
+
+ToastLayer.displayName = 'ToastLayer'
+
+const StyledLayer = styled(Grid)`
+  box-sizing: border-box;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  list-style: none;
+  pointer-events: none;
+  max-width: 420px;
+  width: 100%;
+`

src/core/components/toast/toastProvider.tsx

@@ -1,195 +1,109 @@
-import {AnimatePresence, motion, type Variants} from 'framer-motion'
-import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
-import {styled} from 'styled-components'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
+import {AnimatePresence} from 'framer-motion'
+import {startTransition, useMemo, useState} from 'react'
 import {useMounted} from '../../hooks/useMounted'
-import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box} from '../../primitives'
-import {Layer} from '../../utils'
+import {LayerProvider} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
+import {ToastLayer, type ToastLayerProps} from './toastLayer'
 import {generateToastId} from './toastState'
 import {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
   dismiss: () => void
   id: string
+  updatedAt: number
   params: ToastParams
 }[]
 
 /**
  * @public
  */
-export interface ToastProviderProps {
+export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
   zOffset?: number | number[]
 }
 
-const StyledToastProvider = styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`
-
-const ToastContainer = styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-width: 420px;
-  width: 100%;
-`
-
 /**
  * @public
  */
 export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
-  const {children, padding = 4, paddingX, paddingY, zOffset} = props
-  const [state, _setState] = useState<ToastState>([])
-  const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
+  const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
+  const [state, setState] = useState<ToastState>([])
   const mounted = useMounted()
-  const prefersReducedMotion = usePrefersReducedMotion()
-  const variants = useMemo<Variants>(
-    () => ({
-      /**
-       * These variants makes use of special timing, by using a negative opacity as a starting position,
-       * as well as double opacity as the end position.
-       * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
-       * we want the content to disappear faster than the container.
-       */
-      initial: {
-        opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
-        y: 32,
-        scale: 0.25,
-        willChange: 'transform',
-      },
-      animate: {
-        opacity: 2,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 1,
-        y: 0,
-        scale: 1,
-      },
-      exit: {
-        opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
-        scale: 0.5,
-      },
-      transition: {duration: prefersReducedMotion ? 0 : 0.2},
-    }),
-    [prefersReducedMotion],
-  )
 
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
-      // Wrap setState in startTransition to allow React to give input state updates higher priority
-      const setState: typeof _setState = (state) => startTransition(() => _setState(state))
-
       const id = params.id || generateToastId()
       const duration = params.duration || 5000
 
-      const dismiss = () => {
-        const timeoutId = toastsRef.current[id]?.timeoutId
-
+      startTransition(() => {
         setState((prevState): ToastState => {
-          const idx = prevState.findIndex((t) => t.id === id)
-
-          if (idx > -1) {
-            const toasts = prevState.slice(0)
-
-            toasts.splice(idx, 1)
-
-            return toasts
+          /**
+           * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.
+           * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.
+           * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.
+           * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.
+           */
+          if (duration === 0.01) {
+            return prevState.filter((toast) => toast.id !== id)
           }
 
-          return prevState
-        })
-
-        if (timeoutId !== undefined) {
-          clearTimeout(timeoutId)
-          delete toastsRef.current[id]
-        }
-      }
-
-      setState((prevState): ToastState => {
-        return prevState
-          .filter((t) => t.id !== id)
-          .concat([
+          /**
+           * Creates a function to dismiss this specific toast.
+           * This function will be passed to the Toast component
+           * and called either on close button click or after duration.
+           */
+          const dismiss = () =>
+            startTransition(() =>
+              setState((currentState) => currentState.filter((toast) => toast.id !== id)),
+            )
+
+          /**
+           * Create updated state by:
+           * 1. Removing any existing toast with the same ID (prevents duplicates)
+           * 2. Adding the new toast with its dismiss handler
+           * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.
+           */
+          return [
+            ...prevState.filter((toast) => toast.id !== id),
             {
               dismiss,
               id,
+              updatedAt: Date.now(),
               params: {...params, duration},
             },
-          ])
+          ]
+        })
       })
 
-      if (toastsRef.current[id]) {
-        clearTimeout(toastsRef.current[id].timeoutId)
-        delete toastsRef.current[id]
-      }
-
-      toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
-
       return id
     }
 
     return {version: 0.0, push}
   }, [])
 
-  // clear timeouts on unmount
-  useEffect(
-    () => () => {
-      for (const {timeoutId} of Object.values(toastsRef.current)) {
-        clearTimeout(timeoutId)
-      }
-
-      toastsRef.current = {}
-    },
-    [],
-  )
-
   return (
     <ToastContext.Provider value={value}>
       {children}
       {mounted && (
-        <StyledToastProvider data-ui="ToastProvider" zOffset={zOffset}>
-          <ToastContainer>
-            <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
-              <AnimatePresence initial={false}>
-                {state.map(({dismiss, id, params}) => (
-                  <motion.div
-                    key={id}
-                    layout="position"
-                    initial="initial"
-                    animate="animate"
-                    exit="exit"
-                    variants={variants}
-                    transition={
-                      prefersReducedMotion
-                        ? {duration: 0}
-                        : {type: 'spring', damping: 30, stiffness: 400}
-                    }
-                  >
-                    <Toast
-                      closable={params.closable}
-                      description={params.description}
-                      onClose={dismiss}
-                      status={params.status}
-                      title={params.title}
-                      duration={params.duration}
-                    />
-                  </motion.div>
-                ))}
-              </AnimatePresence>
-            </Box>
-          </ToastContainer>
-        </StyledToastProvider>
+        <LayerProvider zOffset={zOffset}>
+          <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
+            <AnimatePresence initial={false} mode="popLayout">
+              {state.map(({dismiss, id, params, updatedAt}) => (
+                <Toast
+                  key={id}
+                  closable={params.closable}
+                  description={params.description}
+                  onClose={dismiss}
+                  status={params.status}
+                  title={params.title}
+                  duration={params.duration}
+                  updatedAt={updatedAt}
+                />
+              ))}
+            </AnimatePresence>
+          </ToastLayer>
+        </LayerProvider>
       )}
     </ToastContext.Provider>
   )

src/core/components/toast/types.ts

@@ -16,5 +16,11 @@ export interface ToastParams {
  */
 export interface ToastContextValue {
   version: 0.0
+  /**
+   * Creates or updates a toast notification.
+   * If a toast with the same ID already exists, it will be updated.
+   * If an ID is not provided, a random one will be generated.
+   * The returned ID can be used to programatically update a toast.
+   */
   push: (params: ToastParams) => string
 }

src/core/constants.ts

@@ -10,47 +10,60 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
-/**
- * @internal
- */
-export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity' as string
+const POPOVER_MOTION_DURATION = 0.2
 
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
  * @internal
  */
 export const POPOVER_MOTION_PROPS: {
-  animate: Variant
-  initial: Variant
-  exit: Variant
+  card: {
+    initial: Variant
+    hidden: Variant
+    visible: Variant
+    scaleIn: Variant
+    scaleOut: Variant
+  }
+  children: {
+    hidden: Variant
+    visible: Variant
+  }
   transition: Transition
 } = {
-  /**
-   * These variants makes use of special timing, by using a negative opacity as a starting position,
-   * as well as double opacity as the end position.
-   * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
-   * we want the content to disappear faster than the container.
-   */
-  initial: {
-    opacity: 0.5,
-    // the nagative opacity here, as well as the double opacity further down, are to make the content appear after the backgdrop, and when exiting the content should disappear first.
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: -1,
-    scale: 0.97,
-    willChange: 'transform',
-  },
-  animate: {
-    opacity: 2,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 1,
-    scale: 1,
+  card: {
+    initial: {
+      scale: 0.97,
+      willChange: 'transform',
+    },
+    hidden: {
+      opacity: 0,
+    },
+    visible: {
+      opacity: 1,
+      transition: {
+        when: 'beforeChildren',
+        duration: POPOVER_MOTION_DURATION / 2,
+      },
+    },
+    scaleIn: {
+      scale: 1,
+    },
+    scaleOut: {
+      scale: 0.97,
+    },
   },
-  exit: {
-    opacity: 0,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: -1,
-    scale: 0.97,
+  children: {
+    hidden: {
+      opacity: 0,
+    },
+    visible: {
+      opacity: 1,
+    },
   },
   transition: {
-    duration: 0.4,
     type: 'spring',
+    visualDuration: POPOVER_MOTION_DURATION,
+    bounce: 0.25,
   },
 }
 

src/core/primitives/popover/popoverCard.tsx

@@ -3,7 +3,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_PROPS} from '../../constants'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {Arrow, useLayer} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -22,10 +22,11 @@ const MotionCard = styled(motion.create(Card))`
   flex-direction: column;
   width: max-content;
   min-width: min-content;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
+  will-change: transform;
+`
+
+const MotionFlex = styled(motion.create(Flex))`
+  will-change: opacity;
 `
 
 /**
@@ -131,13 +132,24 @@ export const PopoverCard = memo(
         sizing="border"
         style={rootStyle}
         tone={tone}
-        {...(animate ? POPOVER_MOTION_PROPS : {})}
+        variants={POPOVER_MOTION_PROPS.card}
+        transition={POPOVER_MOTION_PROPS.transition}
+        initial={animate ? ['hidden', 'initial'] : undefined}
+        animate={animate ? ['visible', 'scaleIn'] : undefined}
+        exit={animate ? ['hidden', 'scaleOut'] : undefined}
       >
-        <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
+        <MotionFlex
+          data-ui="Popover__wrapper"
+          direction="column"
+          flex={1}
+          overflow={overflow}
+          variants={POPOVER_MOTION_PROPS.children}
+          transition={POPOVER_MOTION_PROPS.transition}
+        >
           <Flex direction="column" flex={1} padding={padding}>
             {children}
           </Flex>
-        </Flex>
+        </MotionFlex>
 
         {arrow && (
           <Arrow

src/core/primitives/tooltip/tooltipCard.tsx

@@ -2,7 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, Radius} from '../../types'
 import {Arrow} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -13,10 +13,7 @@ import {
 } from './constants'
 
 const MotionCard = styled(motion.create(Card))`
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
+  will-change: transform;
 `
 
 /**
@@ -89,7 +86,11 @@ export const TooltipCard = memo(
         scheme={scheme}
         shadow={shadow}
         style={rootStyle}
-        {...(animate ? POPOVER_MOTION_PROPS : {})}
+        variants={POPOVER_MOTION_PROPS.card}
+        transition={POPOVER_MOTION_PROPS.transition}
+        initial={animate ? ['hidden', 'initial'] : undefined}
+        animate={animate ? ['visible', 'scaleIn'] : undefined}
+        exit={animate ? ['hidden', 'scaleOut'] : undefined}
       >
         {children}