@codecademy/gamut

Index: package/dist/Pagination/utils.js
===================================================================
--- package/dist/Pagination/utils.js
+++ package/dist/Pagination/utils.js
@@ -1,8 +1,10 @@
+import { timingValues } from '@codecademy/gamut-styles';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useEffect, useRef } from 'react';
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
+const FADE_DURATION_SECONDS = timingValues.base / 1000;
 export const shouldPagesChange = ({
   chapterSize,
   currentPage,
   shownPageArray,
@@ -48,9 +50,9 @@
         animate: props.showButton,
         exit: "hidden",
         initial: props.buttonDirection === 'forward' && isFirstRender.current ? 'shown' : 'hidden',
         transition: {
-          duration: 0.3
+          duration: FADE_DURATION_SECONDS
         },
         variants: slideAnimationVariants,
         children: /*#__PURE__*/_jsx(WrappedComponent, {
           ...props
@@ -68,25 +70,26 @@
     opacity: 0,
     cursor: 'default'
   }
 };
+const fadeTransition = {
+  duration: FADE_DURATION_SECONDS,
+  ease: 'easeOut',
+  transitionStart: {
+    visibility: 'visible'
+  },
+  transitionEnd: {
+    visibility: 'hidden'
+  }
+};
 export const createAnimatedFadeButton = WrappedComponent => {
   const AnimatedButton = motion.create(WrappedComponent);
   return props => /*#__PURE__*/_jsx(AnimatedButton, {
     animate: props.showButton,
     "aria-label": props.showButton === 'hidden' ? undefined : props['aria-label'],
     disabled: props.showButton === 'hidden',
     initial: false,
-    transition: {
-      transitionStart: {
-        visibility: 'visible'
-      },
-      duration: 0.3,
-      ease: [0.04, 0.62, 0.23, 0.98],
-      transitionEnd: {
-        visibility: 'hidden'
-      }
-    },
+    transition: fadeTransition,
     variants: fadeAnimationVariants,
     ...props
   });
 };
\ No newline at end of file