docs: optimize animations

saas-js · Aug 6, 2022 · 7739c14 · 7739c14
1 parent 8e965c9
commit 7739c14
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git 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
@@ -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
@@ -209,6 +209,7 @@ const Home = () => {
               >
                 <FallInPlace
                   delay={1.4}
+                  threshold={0.2}
                   onChange={(inView) => setAnimate(inView)}
                 >
                   <AspectRatio ratio={1100 / 698}>