Use the new IsAnimatingProvider in the Card component

packages/ui/src/Card/index.tsx

@@ -3,6 +3,7 @@ import styled, { WebTarget } from 'styled-components';
 import { hexOpacity } from '../utils/hexOpacity';
 import { motion } from 'framer-motion';
 import { Title } from './Title';
+import { IsAnimatingProvider } from '../IsAnimatingProvider';
 
 const Root = styled.section``;
 
@@ -90,9 +91,13 @@ export const Card = ({ children, as = 'section', title, layout, layoutId }: Card
     <Root as={as}>
       {title && <Title>{title}</Title>}
 
-      <Content layout={layout} layoutId={layoutId}>
-        {children}
-      </Content>
+      <IsAnimatingProvider>
+        {props => (
+          <Content layout={layout} layoutId={layoutId} {...props}>
+            {children}
+          </Content>
+        )}
+      </IsAnimatingProvider>
     </Root>
   );
 };