Stagger animations

main-site/components/about-section/AboutSection.animations.ts

@@ -0,0 +1,27 @@
+export const hidden = {
+  initial: {
+    opacity: 0,
+    transition: {
+      duration: 1
+    }
+  },
+  animate: {
+    opacity: 0,
+    transition: {
+      duration: 1
+    }
+  }
+};
+export const fadeInUp = {
+  initial: {
+    y: 60,
+    opacity: 0
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 1
+    }
+  }
+};

main-site/components/about-section/AboutSection.styles.ts

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
 import { H2, H3, P } from '../../../shared-ui/style/typography';
 import { max, min } from '../../../shared-ui/lib/responsive';
+import { motion } from 'framer-motion';
 
-const StyledAboutSectionContainer = styled.div`
+const StyledAboutSectionContainer = styled(motion.div)`
   margin-top: 10em;
   padding-bottom: 10em;
   position: relative;
@@ -12,7 +13,7 @@ const StyledAboutSectionContainer = styled.div`
   }
 `;
 
-const StyledItemsContainer = styled.div`
+const StyledItemsContainer = styled(motion.div)`
   display: flex;
   margin: 5em;
   justify-content: center;
@@ -35,7 +36,7 @@ const StyledItemTextContainer = styled.div`
   }
 `;
 
-const StyledTitle = styled(H2)`
+const StyledTitle = styled(motion(H2))`
   color: white;
   text-align: center;
 `;
@@ -61,7 +62,7 @@ const StyledItemDescription = styled(P)`
   }
 `;
 
-const StyledItemContainer = styled.div`
+const StyledItemContainer = styled(motion.div)`
   width: 17em;
   display: flex;
   justify-content: center;

main-site/components/about-section/AboutSection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { min } from '../../../shared-ui/lib/responsive';
 import useMatchMedia from 'react-use-match-media';
 import { colors } from '../../../shared-ui/style/colors';
@@ -24,6 +24,9 @@ import { AboutSectionData } from '../../lib/types';
 import Arrow from '../../../shared-ui/components/arrow/Arrow';
 import { getLeftOrRight } from '../../lib/utils';
 import Shell from '../../../shared-ui/images/shell.png';
+import { useInView } from 'react-intersection-observer';
+import {fadeInUp, hidden } from './AboutSection.animations';
+import { useAnimation } from 'framer-motion';
 
 function getImage(title: string): string {
   if (title === 'Community') {
@@ -41,10 +44,18 @@ const AboutSection: React.FC = () => {
     aboutSectionData[0]
   );
 
+  const animationControls = useAnimation();
+  const [ref, inView] = useInView();
+
+  // if the section is in view, start the animation for the section
+  useEffect(() => {
+    inView ? animationControls.start("animate") : animationControls.set("initial")
+  }, [animationControls, inView])
+
   return (
     <div id="about">
-      <StyledAboutSectionContainer>
-        <StyledTitle>HackBeanpot is about...</StyledTitle>
+      <StyledAboutSectionContainer ref = {ref} initial = "initial" animate = {animationControls}>
+        <StyledTitle variants = {fadeInUp} >HackBeanpot is about...</StyledTitle>
         {!isDesktop && (
           <StyledItemsContainer>
             <StyledLeftImage src={Community} />
@@ -85,7 +96,7 @@ const AboutSection: React.FC = () => {
         {isDesktop && (
           <StyledItemsContainer>
             {aboutSectionData.map((curr) => (
-              <StyledItemContainer key={curr.title}>
+              <StyledItemContainer key={curr.title} variants = {fadeInUp}>
                 <StyledItemImage src={getImage(curr.title)} />
                 <StyledItemTextContainer>
                   <StyledItemTitle color={colors.WHITE}>

main-site/components/events-calendar-section/EventsCalendarSection.styles.ts

@@ -3,12 +3,13 @@ import { max, min } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { fonts, H2, P } from '../../../shared-ui/style/typography';
 import { eventsCalendarData } from '../../lib/data';
+import {motion} from 'framer-motion'
 
 const StyledDesktopTextsContainer = styled.div`
   padding: 1em 0;
 `;
 
-const StyledSectionContainer = styled.div`
+const StyledSectionContainer = styled(motion.div)`
   padding-top: 5em;
   padding-bottom: 30em;
   @media ${max.tablet} {
@@ -17,7 +18,7 @@ const StyledSectionContainer = styled.div`
   }
 `;
 
-const StyledEventsContainer = styled.div`
+const StyledEventsContainer = styled(motion.div)`
   top: 3em;
   position: relative;
   display: flex;
@@ -162,7 +163,7 @@ const EventsSubHeader = styled(P)`
   }
 `;
 
-const StyledH2 = styled(H2)`
+const StyledH2 = styled(motion(H2))`
   text-align: center;
   color: ${colors.WHITE};
 `;

main-site/components/events-calendar-section/EventsCalendarSection.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import EventsSeaweed from '../../../shared-ui/images/seaweed-rock.svg';
 import EventsSeaweedDark from '../../../shared-ui/images/seaweed-rock-dark.svg';
 import EventsFishSchool from '../../../shared-ui/images/school-fish.svg';
@@ -16,21 +16,35 @@ import { min } from '../../../shared-ui/lib/responsive';
 import useMatchMedia from 'react-use-match-media';
 import DesktopTexts from './texts/DesktopTexts';
 import { eventsCalendarData } from '../../lib/data';
+import variants from '../../../shared-ui/animations/variants';
+import { useAnimation } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+import { fadeInUp } from './EventsCalenderSection.animation';
+import { EventsCalenderSectionProps } from '../../lib/types';
 
-const EventsCalendarSection: React.FC = ({ isDay }) => {
+const EventsCalendarSection: React.FC<EventsCalenderSectionProps> = ({ isDay }) => {
   const isDesktop = useMatchMedia(min.tablet);
+
+  const animationControls = useAnimation();
+  const [ref, inView] = useInView();
+
+  // if the section is in view, start the animation for the section
+  useEffect(() => {
+    inView ? animationControls.start("animate") : animationControls.set("initial")
+  }, [animationControls, inView])
+
   return (
     <div id="calendar">
-      <StyledSectionContainer>
-        <StyledH2>Events Calendar</StyledH2>
-        <StyledEventsContainer>
+      <StyledSectionContainer ref = {ref} initial = "initial" animate = {animationControls}>
+        <StyledH2 variants = {fadeInUp}>Events Calendar</StyledH2>
+        <StyledEventsContainer variants = {fadeInUp}>
           {isDesktop && (
             <StyledEventsFishSchool
               src={isDay ? EventsFishSchool : EventsFishSchoolDark}
             />
           )}
           <StyledEventsCalendar>
-            <DesktopTexts isDay = {isDay} />
+            <DesktopTexts isDay={isDay} />
           </StyledEventsCalendar>
         </StyledEventsContainer>
       </StyledSectionContainer>

main-site/components/events-calendar-section/EventsCalenderSection.animation.ts

@@ -0,0 +1,28 @@
+export const hidden = {
+  initial: {
+    opacity: 0,
+    transition: {
+      duration: 1
+    }
+  },
+  animate: {
+    opacity: 0,
+    transition: {
+      duration: 1
+    }
+  }
+};
+
+export const fadeInUp = {
+  initial: {
+    y: 60,
+    opacity: 0
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 1
+    }
+  }
+};

main-site/components/landing-section/LandingSection.animations.ts

@@ -18,3 +18,53 @@ export const moonRock = {
     }
   }
 };
+
+
+export const fadeInUp = {
+  initial: {
+    y: 60,
+    opacity: 0
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 1
+    }
+  }
+};
+export const fadeInLeft = {
+  initial: {
+    x: -60,
+    opacity: 0
+  },
+  animate: {
+    x: 0,
+    opacity: 1,
+    transition: {
+      duration: 1
+    }
+  }
+};
+
+export const fadeInRight = {
+  initial: {
+    x: 60,
+    opacity: 0
+  },
+  animate: {
+    x: 0,
+    opacity: 1,
+    transition: {
+      duration: 1
+    }
+  }
+};
+
+export const stagger = {
+  animate: {
+    transition: {
+      staggerChildren: 0.5
+    }
+  }
+};

main-site/components/landing-section/LandingSection.styles.ts

@@ -5,8 +5,8 @@ import { max, min } from '../../../shared-ui/lib/responsive';
 import { colors } from '../../../shared-ui/style/colors';
 import { H1, H3, H5, H6, P } from '../../../shared-ui/style/typography';
 
-const StyledHackathonText = styled(H5)`
-   {
+const StyledHackathonText = styled(motion(H5))`
+  {
     color: ${colors.WHITE};
     padding-bottom: 0.2em;
     @media ${max.tablet} {
@@ -19,8 +19,7 @@ const StyledHackathonText = styled(H5)`
   }
 `;
 
-
-const StyledThemeText = styled(H1)`
+const StyledThemeText = styled(motion(H1))`
    {
     color: ${colors.WHITE};
     padding-bottom: 0.1em;
@@ -33,7 +32,7 @@ const StyledThemeText = styled(H1)`
   }
 `;
 
-const StyledThemeTextSmall = styled(H6)`
+const StyledThemeTextSmall = styled(motion(H6))`
    {
     color: ${colors.WHITE};
     padding-bottom: 0.1em;
@@ -46,7 +45,7 @@ const StyledThemeTextSmall = styled(H6)`
   }
 `;
 
-const StyledThemeTextParagraph = styled(P)`
+const StyledThemeTextParagraph = styled(motion(P))`
    {
     color: ${colors.WHITE};
     padding-bottom: 0.1em;
@@ -88,7 +87,7 @@ const StyledBubble1 = styled.img`
   @media ${min.tablet} {
     width: 5%;
   }
-`
+`;
 
 const StyledBubble2 = styled.img`
   position: absolute;
@@ -107,7 +106,7 @@ const StyledBubble2 = styled.img`
     top: 90vw;
     right: -5vw;
   }
-`
+`;
 
 const StyledFish = styled.img`
   position: absolute;
@@ -126,7 +125,7 @@ const StyledFish = styled.img`
   @media ${max.mobile} {
     top: 110vw;
   }
-`
+`;
 
 const StyledJellyfish = styled.img`
   position: absolute;
@@ -146,7 +145,7 @@ const StyledJellyfish = styled.img`
   @media ${max.mobile} {
     top: 110vw;
   }
-`
+`;
 
 const StyledWhale = styled.img`
   position: absolute;
@@ -165,9 +164,9 @@ const StyledWhale = styled.img`
   @media ${max.mobile} {
     top: 120vw;
   }
-`
+`;
 
-const StyledLandingTextContainer = styled.div`
+const StyledLandingTextContainer = styled(motion.div)`
   padding-top: 21em;
   text-align: center;
   @media ${max.tabletLg} {
@@ -184,11 +183,11 @@ const StyledLandingTextContainer = styled.div`
   }
 `;
 
-const StyledLandingSectionContainer = styled.div`
+const StyledLandingSectionContainer = styled(motion.div)`
   position: relative;
 `;
 
-const StyledLandingButtonContainer = styled(PrimaryButton)`
+const StyledLandingButtonContainer = styled(motion(PrimaryButton))`
   padding-top: 2em;
   position: fixed;
   justify-content: left;
@@ -226,15 +225,15 @@ const StyledHourglass = styled.img`
   margin-right: 0.3em;
 `;
 
-const StyledCountdownContainer = styled.div`
+const StyledCountdownContainer = styled(motion.div)`
   display: flex;
   justify-content: center;
 `;
 
 export {
   StyledHackathonText,
   StyledThemeText,
-  StyledThemeTextSmall, 
+  StyledThemeTextSmall,
   StyledThemeTextParagraph,
   StyledLandingButtonContainer,
   StyledLandingSectionContainer,