stuff ugh katie help

Author: ray10102

package.json

@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "anime": "^0.1.2",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-manifest": "^2.4.14",
@@ -18,6 +19,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
+    "scrollmonitor-hooks": "^1.0.2",
     "styled-components": "^5.1.1"
   },
   "devDependencies": {

src/components/animated-svg.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Morph = styled.svg`
+	position: relative;
+	height: 100%;
+	fill: var(--background-color-2);
+  flex: none;
+`
+class AnimatedSVG extends React.Component {
+    
+
+    render() {
+        return (
+            <Morph className="morph" width="100%" height="100%" viewBox="0 0 1400 770">
+                <path d={shape.pathAlt} />
+            </Morph>
+        )
+        /*return (
+            <Morph>
+                <Anime easing="easeOutElastic"
+                    duration={shape.animation.path.duration}
+                    direction="alternate"
+                    loop={true}
+                    autoplay={true}
+                    d={shape.pathAlt}
+                    scale={[shape.scaleX, shape.scaleY]}>
+                    <path d={shape.path} />
+                </Anime>
+            </Morph>
+        );
+        */
+    }
+} export default AnimatedSVG;

src/components/landing.js

@@ -61,21 +61,20 @@ overflow: hidden;
 
 */
 
-const Landing = () => {
-    return(
-        <>
-            <SectionContainer>
-                <TitleContainer>
-                    <University>Northeastern University</University>
-                    <Name>Computer Science Mentoring Organization</Name>
-                    <InfoContainer>
-                        <InfoSection>Northeastern's Computer Science Mentoring Organization serves to better connect Northeastern students who are interested in computer science.</InfoSection>
-                        <InfoSection>We run a mentorship program every semester where undergraduates who are interested in computer science can get the help they need with classes, co-ops, and more.</InfoSection>
-                        <InfoSection>CoSMO is open to all. No prior CS experience required!</InfoSection>
-                    </InfoContainer>
-                </TitleContainer>
-            </SectionContainer>
-        </>
+const Landing = ({ callbacks }) => {
+    return (
+
+        <SectionContainer callbacks={callbacks}>
+            <TitleContainer>
+                <University>Northeastern University</University>
+                <Name>Computer Science Mentoring Organization</Name>
+                <InfoContainer>
+                    <InfoSection>Northeastern's Computer Science Mentoring Organization serves to better connect Northeastern students who are interested in computer science.</InfoSection>
+                    <InfoSection>We run a mentorship program every semester where undergraduates who are interested in computer science can get the help they need with classes, co-ops, and more.</InfoSection>
+                    <InfoSection>CoSMO is open to all. No prior CS experience required!</InfoSection>
+                </InfoContainer>
+            </TitleContainer>
+        </SectionContainer>
     )
 }
 

src/components/section-container.js

@@ -1,9 +1,22 @@
 import styled from "styled-components"
+import { useScrollMonitor } from 'scrollmonitor-hooks';
+import React, { useRef } from "react"
 
-const SectionContainer = styled.div`
+
+const SectionContainerBase = styled.div`
 width: 100%;
 height: 900px;
 max-width: 1600px;
 margin: auto;
 `
+
+const SectionContainer = ({children, callbacks}) => {
+    const ref = useRef(null);
+    useScrollMonitor(ref, callbacks, -300);
+    return (
+        <SectionContainerBase ref={ref} className="content-wrap">
+            {children}
+        </SectionContainerBase>
+    );
+}
 export default SectionContainer;

src/components/values.js

@@ -36,9 +36,9 @@ const valuesSectionShowcaseProps = {
     ]
 }
 
-const Values = () => {
+const Values = ({callbacks}) => {
     return (
-        <SectionContainer>
+        <SectionContainer callbacks={callbacks}>
             <Title>
                 Our goals... idk what to put here lol but this is space we can put more info
                 </Title>