From 7739c140374e7a7cc2fd82b70d9c3c6b00a3b8d7 Mon Sep 17 00:00:00 2001
From: Eelco Wiersma <contact@pagebakers.nl>
Date: Sat, 6 Aug 2022 21:47:01 +0200
Subject: [PATCH] docs: optimize animations

---
 apps/website/src/components/background-gradient-radial.tsx | 2 +-
 apps/website/src/components/motion/fall-in-place.tsx       | 3 +++
 apps/website/src/pages/index.tsx                           | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/components/background-gradient-radial.tsx b/apps/website/src/components/background-gradient-radial.tsx
index 75fd89eb6..9dba7e7bd 100644
--- a/apps/website/src/components/background-gradient-radial.tsx
+++ b/apps/website/src/components/background-gradient-radial.tsx
@@ -47,7 +47,7 @@ export const BackgroundGradientRadial = ({
       width="100%"
       zIndex="1"
       opacity="0"
-      animation={animate && `${glow} 4s ease-out 0.2s`}
+      animation={animate && `${glow} 4s ease-out`}
       sx={{ animationFillMode: 'forwards' }}
       {...props}
     >
diff --git a/apps/website/src/components/motion/fall-in-place.tsx b/apps/website/src/components/motion/fall-in-place.tsx
index 12625df4e..72cfee042 100644
--- a/apps/website/src/components/motion/fall-in-place.tsx
+++ b/apps/website/src/components/motion/fall-in-place.tsx
@@ -7,17 +7,20 @@ export const FallInPlace = ({
   delay = 0.2,
   translateY = '20px',
   initialInView,
+  threshold,
   onChange,
   ...rest
 }: MotionBoxProps & {
   delay?: number
   initialInView?: boolean
+  threshold?: number
   translateY?: string
   onChange?: IntersectionOptions['onChange']
 }) => {
   const { ref, inView } = useInView({
     triggerOnce: true,
     initialInView,
+    threshold,
     onChange,
   })
 
diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
index 7b6cdf8a9..5e6e74923 100644
--- a/apps/website/src/pages/index.tsx
+++ b/apps/website/src/pages/index.tsx
@@ -209,6 +209,7 @@ const Home = () => {
               >
                 <FallInPlace
                   delay={1.4}
+                  threshold={0.2}
                   onChange={(inView) => setAnimate(inView)}
                 >
                   <AspectRatio ratio={1100 / 698}>