diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
index 46a8595fd0f..af24c4f7bdd 100644
--- a/src-docs/src/views/header/header_alert.js
+++ b/src-docs/src/views/header/header_alert.js
@@ -138,10 +138,10 @@ const HeaderUpdates = forwardRef(
     const bellRef = useRef();
     const cheerRef = useRef();
 
-    // we're passing passing the `triggerAnimation` callbacks to the `headerUpdatesRef` child components that we want to animate
+    // we're passing passing the `animate` callbacks to the `headerUpdatesRef` child components that we want to animate
     const animate = useCallback(() => {
-      bellRef.current?.triggerAnimation();
-      cheerRef.current?.triggerAnimation();
+      bellRef.current?.animate();
+      cheerRef.current?.animate();
     }, []);
 
     // we're using the `useImperativeHandle` which allows the child to expose a function to the parent
diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js
index 6004ef17d9a..dbe9bf2badb 100644
--- a/src-docs/src/views/header/header_example.js
+++ b/src-docs/src/views/header/header_example.js
@@ -106,7 +106,9 @@ const headerLinksSnippet = `<EuiHeader>
   </EuiHeaderLinks>
 </EuiHeader>`;
 
-const headerAlertSnippet = `<EuiHeader>
+const headerAlertSnippet = [
+  ,
+  `<EuiHeader>
   <EuiHeaderSection grow={false}>
     <EuiHeaderSectionItem>
       <!-- HeaderSectionItem content -->
@@ -117,18 +119,24 @@ const headerAlertSnippet = `<EuiHeader>
     <EuiHeaderSectionItem>
       <!-- Button to trigger portal content like a EuiPopover or a EuiFlyout -->
       <EuiHeaderSectionItemButton
+        ref={bellButtonRef}
         aria-controls={portalContentId}
         aria-expanded={isPortalContentVisible}
         aria-label="Open portal content"
         onClick={() => showPortalConten()}
         notification={showNotification}
-        animation={isAnimating}
       >
         <EuiIcon type="bell" />
       </EuiHeaderSectionItemButton>
     </EuiHeaderSectionItem>
   </EuiHeaderSection>
-</EuiHeader>`;
+</EuiHeader>`,
+  `<!-- You can target the bellButtonRef to trigger the animation -->
+<EuiButton onClick={() => bellButtonRef.current?.animate()}>
+  Animate
+</EuiButton>
+`,
+];
 
 export const HeaderExample = {
   title: 'Header',
@@ -343,9 +351,8 @@ export const HeaderExample = {
             <EuiCode>node</EuiCode> that will render inside a{' '}
             <strong>EuiBadgeNotification</strong> or pass{' '}
             <EuiCode>true</EuiCode> to render a simple dot. You can also animate
-            the button by calling the <EuiCode>triggerAnimation()</EuiCode>{' '}
-            method on the <strong>EuiHeaderSectionItemButton</strong>{' '}
-            <EuiCode>ref</EuiCode>.
+            the button by calling the <EuiCode>animate()</EuiCode> method on the{' '}
+            <strong>EuiHeaderSectionItemButton</strong> <EuiCode>ref</EuiCode>.
           </p>
 
           <p>
diff --git a/src/components/header/header_section/header_section_item_button.tsx b/src/components/header/header_section/header_section_item_button.tsx
index 8517155ac06..6d19d8181c8 100644
--- a/src/components/header/header_section/header_section_item_button.tsx
+++ b/src/components/header/header_section/header_section_item_button.tsx
@@ -74,7 +74,7 @@ export const EuiHeaderSectionItemButton = forwardRef<
       ref,
       () => {
         if (buttonRef) {
-          (buttonRef as any).triggerAnimation = () => {
+          (buttonRef as any).animate = () => {
             const keyframes: Keyframe[] = [
               { transform: 'rotate(0)', offset: 0, easing: 'ease-in-out' },
               {