diff --git a/src/components/header/header_section/header_section_item_button.test.tsx b/src/components/header/header_section/header_section_item_button.test.tsx
index 97cdf57bedb..cb0f56a9590 100644
--- a/src/components/header/header_section/header_section_item_button.test.tsx
+++ b/src/components/header/header_section/header_section_item_button.test.tsx
@@ -18,10 +18,13 @@
  */
 
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { mount, render, shallow } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
 
-import { EuiHeaderSectionItemButton } from './header_section_item_button';
+import {
+  EuiHeaderSectionItemButton,
+  EuiHeaderSectionItemButtonRef,
+} from './header_section_item_button';
 
 describe('EuiHeaderSectionItemButton', () => {
   test('is rendered', () => {
@@ -67,13 +70,31 @@ describe('EuiHeaderSectionItemButton', () => {
     });
   });
 
-  // test('renders animation', () => {
-  //   const component = render(
-  //     <EuiHeaderSectionItemButton animation={true} notification={true} />
-  //   );
-  //
-  //   expect(component).toMatchSnapshot();
-  // });
+  describe('animation', () => {
+    const animate = HTMLElement.prototype.animate;
+    beforeAll(() => {
+      HTMLElement.prototype.animate = jest.fn();
+    });
+    afterAll(() => {
+      HTMLElement.prototype.animate = animate;
+    });
+
+    it('renders animation', () => {
+      expect.assertions(2);
+
+      mount(
+        <EuiHeaderSectionItemButton ref={testAnimation} notification={true} />
+      );
+
+      function testAnimation(element: EuiHeaderSectionItemButtonRef) {
+        if (element) {
+          expect(element.animate).toHaveBeenCalledTimes(0);
+          element.triggerAnimation();
+          expect(element.animate).toHaveBeenCalledTimes(1);
+        }
+      }
+    });
+  });
 
   describe('onClick', () => {
     test("isn't called upon instantiation", () => {
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 526c719ebae..1b77e9503e3 100644
--- a/src/components/header/header_section/header_section_item_button.tsx
+++ b/src/components/header/header_section/header_section_item_button.tsx
@@ -47,7 +47,9 @@ export type EuiHeaderSectionItemButtonProps = CommonProps &
     notificationColor?: EuiNotificationBadgeProps['color'];
   };
 
-export type EuiHeaderSectionItemButtonRef = HTMLButtonElement | null;
+export type EuiHeaderSectionItemButtonRef =
+  | (HTMLButtonElement & { triggerAnimation: () => void })
+  | null;
 
 export const EuiHeaderSectionItemButton = forwardRef<
   EuiHeaderSectionItemButtonRef,
@@ -67,7 +69,7 @@ export const EuiHeaderSectionItemButton = forwardRef<
      */
     ref
   ) => {
-    const [buttonRef, setButtonRef] = useState<EuiHeaderSectionItemButtonRef>();
+    const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>();
     const animationTargetRef = useRef<HTMLSpanElement | null>(null);
 
     useImperativeHandle<
@@ -192,7 +194,7 @@ export const EuiHeaderSectionItemButton = forwardRef<
               duration: 5000,
             });
           };
-          return buttonRef;
+          return buttonRef as EuiHeaderSectionItemButtonRef;
         } else {
           return null;
         }