animation for services section (#7)

chowworks · Nov 28, 2023 · d25d643 · d25d643
1 parent fae8b84
commit d25d643
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/components/animated/AnimatedServiceItem.tsx b/src/components/animated/AnimatedServiceItem.tsx
@@ -5,7 +5,8 @@ import {AnimatedServiceItemNoRefType} from "../BlockContentTypes";
 import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
 import ColoredPng from "../colored-png/ColoredPng";
-import {motion, useAnimationControls} from "framer-motion"
+import {motion, useAnimation, useAnimationControls} from "framer-motion"
+import {useInView} from "react-intersection-observer";
 
 interface IProps {
     service: AnimatedServiceItemNoRefType
@@ -27,9 +28,29 @@ const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
         await controls.start({scale: 1.1})
     }
 
+    const shapeControls = useAnimation();
+    const [shapeRef, shapeInView] = useInView();
+
+    React.useEffect(() => {
+        if (shapeInView) {
+             shapeControls.start("onScreen");
+        }
+        else {
+            shapeControls.start("offScreen");
+        }
+    }, [shapeControls, shapeInView]);
+
+    const variants = {
+        onScreen: {opacity: 1, transition: {duration: 2.5}},
+        offScreen: {opacity: 0, transition: {duration: 1}}
+    };
+
     return (
             <motion.div
-                style={{width:"100%"}}
+                ref={shapeRef}
+                variants={variants}
+                initial="offScreen"
+                animate={shapeControls}
                 onHoverStart={async () => {
                     await animateShrinkIcon()
                 }}
@@ -84,8 +105,8 @@ const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
                             backgroundImage: `url(${urlFor(props.service.backgroundImageSrc ?? "").url() ?? ""})`,
                         }} justifyContent='center'>
                             <Grid item>
-                                <Typography color='textSecondary' style={{marginTop: "16px", marginBottom: "16px",}}
-                                            variant='h6' align='center'>{props.service.contentTitle}</Typography>
+                                <Typography fontSize={24} color='textSecondary' style={{marginTop: "16px", marginBottom: "16px",}}
+                                            variant='body2' align='center'>{props.service.contentTitle}</Typography>
                             </Grid>
                             <Grid item>
                                 <Typography color='textSecondary' variant='body1' align='center'

diff --git a/src/components/animated/AnimatedServicesSection.tsx b/src/components/animated/AnimatedServicesSection.tsx
@@ -73,7 +73,7 @@ const AnimatedServicesSection: FunctionComponent<IProps> = (props) => {
                     </Grid>
                     <Grid item container justifyContent='center' spacing={2}>
                         {props.sectionData.servicesList?.map((service: AnimatedServiceItemNoRefType, index: number) => {
-                            return <Grid key={`service-item-${index}`} item xs={6}><AnimatedServiceItem
+                            return <Grid key={`service-item-${index}`} item sm={6}><AnimatedServiceItem
                                 service={service}/></Grid>
                         })}
                     </Grid>