From ba28dc74342e786981b9f545bdb145585438628a Mon Sep 17 00:00:00 2001
From: Michiel Leunens <michiel.leunens@gmail.com>
Date: Wed, 22 Dec 2021 19:42:36 +0100
Subject: [PATCH] use recuded motion for modal

---
 components/ui/Modal/Modal.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index 9df58be..4844683 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -8,7 +8,7 @@ import {
   enableBodyScroll,
 } from 'body-scroll-lock';
 import cn from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import { FC, MutableRefObject, useCallback, useEffect, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 
@@ -44,6 +44,8 @@ const Modal: FC<ModalProps> = ({
   title,
 }) => {
   const ref = useRef() as MutableRefObject<HTMLDivElement>;
+  const shouldReduceMotion = useReducedMotion();
+  const closedY = shouldReduceMotion ? 0 : 200;
   const duration = 0.3;
   useClickOutside(ref, () => onClose());
 
@@ -90,9 +92,12 @@ const Modal: FC<ModalProps> = ({
               exit="closed"
               variants={{
                 open: { opacity: 1, y: 0 },
-                closed: { opacity: 0, y: 200 },
+                closed: { opacity: 0, y: closedY },
+              }}
+              transition={{
+                duration,
+                type: 'spring',
               }}
-              transition={{ duration }}
               aria-modal
               aria-labelledby={title}
               tabIndex={-1}