docs: optimize animations

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

Hide file tree

Showing 6 changed files with 45 additions and 18 deletions.
diff --git a/apps/website/src/components/announcement-banner/announcement-banner.tsx b/apps/website/src/components/announcement-banner/announcement-banner.tsx
@@ -44,7 +44,7 @@ export const AnnouncementBanner: React.FC<AnnouncementBannerProps> = (
       width="100%"
     >
       <Container maxW="container.2xl" px="8">
-        <FallInPlace>
+        <FallInPlace initialInView delay={1.4} translateY="-10px">
           <NextLink href={href}>
             <Banner
               as={LinkBox}

diff --git a/apps/website/src/components/background-gradient-radial.tsx b/apps/website/src/components/background-gradient-radial.tsx
@@ -6,16 +6,21 @@ import {
   keyframes,
 } from '@chakra-ui/react'
 
+import { useInView } from 'react-intersection-observer'
+
 const glow = keyframes`
 0% {
     opacity: 0;
+    transform: scale(0.2);
     animation-timing-function: cubic-bezier(.74,.25,.76,1);
 }
 10% {
     opacity: 1;
+    transform: scale(1);
     animation-timing-function: cubic-bezier(.12,.01,.08,.99);
 }
 100% {
+    transform: scale(1);
     opacity: 0.8;
 }`
 
@@ -25,6 +30,7 @@ export const BackgroundGradientRadial = ({
   ...props
 }: any) => {
   const theme = useTheme()
+
   const colors = [
     theme.colors.primary['800'],
     theme.colors.secondary['500'],
@@ -41,7 +47,7 @@ export const BackgroundGradientRadial = ({
       width="100%"
       zIndex="1"
       opacity="0"
-      animation={`${glow} 4s ease-out .9s`}
+      animation={animate && `${glow} 4s ease-out 0.2s`}
       sx={{ animationFillMode: 'forwards' }}
       {...props}
     >

diff --git a/apps/website/src/components/layout/header.tsx b/apps/website/src/components/layout/header.tsx
@@ -23,20 +23,20 @@ const Header = (props: HeaderProps) => {
     return scrollY.onChange(() => setY(scrollY.get()))
   }, [scrollY])
 
-  const bg = useColorModeValue('whiteAlpha.700', 'blackAlpha.600')
+  const bg = useColorModeValue('whiteAlpha.700', 'hsl(210 11% 10% / 85%)')
 
   return (
     <Box
       ref={ref}
       as="header"
       top="0"
       w="full"
-      backdropFilter="blur(10px)"
+      backdropFilter="blur(16px)"
       zIndex="sticky"
       borderColor="whiteAlpha.100"
       transitionProperty="common"
-      transitionDuration="normal"
-      bg={bg}
+      transitionDuration="slow"
+      bg={y > height ? bg : 'transparent'}
       boxShadow={y > height ? 'md' : ''}
       borderBottomWidth="1px"
       {...props}

diff --git a/apps/website/src/components/motion/box.tsx b/apps/website/src/components/motion/box.tsx
@@ -8,6 +8,6 @@ export type MotionBoxProps = Merge<
   HTMLMotionProps<'div'>
 >
 
-const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div)
+const MotionBox = motion(chakra.div)
 
 export default MotionBox
diff --git a/apps/website/src/components/motion/fall-in-place.tsx b/apps/website/src/components/motion/fall-in-place.tsx
@@ -1,20 +1,36 @@
 import MotionBox, { MotionBoxProps } from './box'
 import React from 'react'
+import { useInView, IntersectionOptions } from 'react-intersection-observer'
 
 export const FallInPlace = ({
   children,
   delay = 0.2,
+  translateY = '20px',
+  initialInView,
+  onChange,
   ...rest
-}: MotionBoxProps & { delay?: number }) => {
+}: MotionBoxProps & {
+  delay?: number
+  initialInView?: boolean
+  translateY?: string
+  onChange?: IntersectionOptions['onChange']
+}) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    initialInView,
+    onChange,
+  })
+
   return (
     <MotionBox
-      initial={{ scale: 1, opacity: 0, translateY: '20px' }}
-      animate={{ scale: 1, opacity: 1, translateY: 0 }}
+      ref={ref}
+      initial={{ scale: 1, opacity: 0, translateY }}
+      animate={inView && { scale: 1, opacity: 1, translateY: 0 }}
       transition={{
         type: 'tween',
         ease: 'easeOut',
         duration: 2,
-        delay,
+        delay: initialInView ? delay : 0,
       }}
       {...rest}
     >

diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
@@ -105,6 +105,7 @@ const ComponentShowcase = dynamic(() =>
 )
 
 const Home = () => {
+  const [animateGlow, setAnimate] = React.useState()
   return (
     <Box>
       <SEO
@@ -114,7 +115,7 @@ const Home = () => {
       />
 
       <Box mb={8} w="full" position="relative" overflow="hidden">
-        <Box _dark={{ bg: 'black' }}>
+        <Box _dark={{ bg: 'black' }} pt="16">
           <Container
             maxW="container.xl"
             py={{ base: 10, lg: 20, xl: 40 }}
@@ -132,7 +133,7 @@ const Home = () => {
                 alignItems="center"
                 textAlign="center"
                 title={
-                  <FallInPlace textAlign="center">
+                  <FallInPlace textAlign="center" initialInView>
                     Build intuitive apps that your customers will love
                   </FallInPlace>
                 }
@@ -141,6 +142,7 @@ const Home = () => {
                     delay={0.4}
                     fontWeight="medium"
                     textAlign="center"
+                    initialInView
                   >
                     Saas UI is a <Em>React component library</Em> and{' '}
                     <Em>starterkit</Em>
@@ -150,7 +152,7 @@ const Home = () => {
                   </FallInPlace>
                 }
               >
-                <FallInPlace delay={0.6}>
+                <FallInPlace delay={0.8} initialInView>
                   <HStack pt="12" pb="12" spacing="8" justifyContent="center">
                     <HStack>
                       <ReactLogo height="24px" />
@@ -159,7 +161,7 @@ const Home = () => {
                     <ChakraLogo height="24px" />
                   </HStack>
                 </FallInPlace>
-                <FallInPlace delay={0.8}>
+                <FallInPlace delay={1} initialInView>
                   <ButtonGroup spacing={4} alignItems="center">
                     <Button
                       colorScheme="primary"
@@ -205,7 +207,10 @@ const Home = () => {
                 position="relative"
                 zIndex="2"
               >
-                <FallInPlace delay={1}>
+                <FallInPlace
+                  delay={1.4}
+                  onChange={(inView) => setAnimate(inView)}
+                >
                   <AspectRatio ratio={1100 / 698}>
                     <Image
                       src="/screenshots/list.png"
@@ -220,7 +225,7 @@ const Home = () => {
                 </FallInPlace>
               </Box>
             </Stack>
-            <BackgroundGradientRadial bottom="0" />
+            <BackgroundGradientRadial bottom="0" animate={animateGlow} />
           </Container>
           <Features
             id="benefits"
@@ -1370,7 +1375,7 @@ export async function getStaticProps() {
         action: false,
       },
       header: {
-        position: 'sticky',
+        position: 'fixed',
         variant: 'dark',
       },
     },