chore: move FadeInSlideOut into Animation folder & write story

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -37,6 +37,7 @@ exports[`Gamut Exported Keys 1`] = `
   "Drawer",
   "ExpandControl",
   "ExpandInCollapseOut",
+  "FadeInSlideOut",
   "FeatureShimmer",
   "FillButton",
   "FlexBox",

packages/gamut/src/Animation/index.ts

@@ -1,2 +1,3 @@
 export * from './Rotation';
 export * from './ExpandInCollapseOut';
+export * from './FadeInSlideOut';

packages/gamut/src/Toaster/index.tsx

@@ -4,9 +4,9 @@ import { ReactNode } from 'react';
 import * as React from 'react';
 
 import { ToastProps } from '..';
+import { FadeInSlideOut } from '../Animation/FadeInSlideOut';
 import { BodyPortal } from '../BodyPortal';
 import { Box } from '../Box';
-import { FadeInSlideOut } from '../Motion/FadeInSlideOut';
 import { Toast } from '../Toast/Toast';
 
 interface ToasterItem extends Omit<ToastProps, 'onClose'> {

packages/styleguide/src/lib/Atoms/Animations/About.mdx

@@ -29,5 +29,12 @@ Animations should not be the click target of actions, but rather the container f
       title: 'ExpandInCollapseOut',
       status: 'current',
     },
+    {
+      id: '/Atoms/Animations/FadeInSlideOut',
+      subtitle:
+        'A container that applies a fade and slide animation to its children.',
+      title: 'FadeInSlideOut',
+      status: 'current',
+    },
   ]}
 />

packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as FadeInSlideOut from './FadeInSlideOut.stories';
+
+export const parameters = {
+  subtitle: `An animation component that fades in when appearing and slides out when disappearing.`,
+  status: 'current',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/FadeInSlideOut.tsx',
+  },
+};
+
+<Meta of={FadeInSlideOut} />
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+This animation uses [Framer Motion](https://motion.dev/) to animate the appearance and disappearance of a component. The animation has three states, `initial`, `visible`, and `exit`.
+
+Wrap the `FadeInSlideOut` component with an `AnimatePresence` and pass in children components to be animated. The component should be conditionally rendered (using `&&` or a ternary operator). The animation is triggered when the component is added to or removed from the DOM, not by changing styles or props.
+
+## Playground
+
+<Canvas sourceState="shown" of={FadeInSlideOut.Default} />
+
+<Controls />

packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx

@@ -0,0 +1,37 @@
+import { Box, FadeInSlideOut, FillButton, FlexBox } from '@codecademy/gamut';
+import type { Meta } from '@storybook/react';
+import { AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+
+const meta: Meta<typeof FadeInSlideOut> = {
+  component: FadeInSlideOut,
+  args: {},
+};
+
+export default meta;
+
+export const Default: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <FlexBox column>
+      <Box>
+        <FillButton onClick={() => setIsVisible(!isVisible)}>
+          {isVisible ? 'Thanks!' : 'Click me.'}
+        </FillButton>
+      </Box>
+      <Box mt={8}>
+        <AnimatePresence>
+          {isVisible && (
+            <FadeInSlideOut>
+              <Box border={1} p={8}>
+                Even in a stupid, stupid universe where we have hot dogs for
+                fingers, we get very good with our feet.
+              </Box>
+            </FadeInSlideOut>
+          )}
+        </AnimatePresence>
+      </Box>
+    </FlexBox>
+  );
+};