From a2d35650c6e102d9120389fc2e8b233f470df1c8 Mon Sep 17 00:00:00 2001
From: Mariia Shabelnik <>
Date: Wed, 27 Jul 2022 23:36:00 +0200
Subject: [PATCH] added scroll motion

---
 package-lock.json        | 18 +++++++++-
 package.json             |  3 +-
 src/App.css              | 28 ++++++++++-----
 src/pages/Contact.jsx    |  2 +-
 src/pages/Experience.jsx |  2 +-
 src/pages/Home.jsx       | 73 ++++++++++++++++++++++++++++++++++++++--
 6 files changed, 111 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3f08772..2e78f32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "hamburger-react": "^2.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.3.0"
+        "react-router-dom": "^6.3.0",
+        "react-scroll-motion": "^0.3.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.15",
@@ -1287,6 +1288,15 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-scroll-motion": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/react-scroll-motion/-/react-scroll-motion-0.3.0.tgz",
+      "integrity": "sha512-/7VUbyu0nONmlyQsnivcAOPCdc6GnS6LFL7R3QygtBjVAmA7dD29B/jje3jNa0fLlrwycriXq/Nm9sWgX7A1Bw==",
+      "peerDependencies": {
+        "react": "^18.0.11",
+        "react-dom": "^18.0.11"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
@@ -2293,6 +2303,12 @@
         "react-router": "6.3.0"
       }
     },
+    "react-scroll-motion": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/react-scroll-motion/-/react-scroll-motion-0.3.0.tgz",
+      "integrity": "sha512-/7VUbyu0nONmlyQsnivcAOPCdc6GnS6LFL7R3QygtBjVAmA7dD29B/jje3jNa0fLlrwycriXq/Nm9sWgX7A1Bw==",
+      "requires": {}
+    },
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
diff --git a/package.json b/package.json
index f43e117..b0c90af 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "hamburger-react": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-scroll-motion": "^0.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
diff --git a/src/App.css b/src/App.css
index e310e49..6dd0d6b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,15 +5,26 @@
 }
 
 .nav .container {
-  height: 3em;
+  height: 4em;
+}
+
+.content {
+  margin-top: 5em;
 }
 
 .nav {
-  background-color: rgb(47, 46, 58);
-  height: 3em;
-  box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);
+  background-color: #302f38;
+  height: 4em;
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 100000;
 }
 
+/*box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);*/
+
 .nav a {
   text-decoration: none;
   color: #e5e5ff;
@@ -46,7 +57,8 @@
 }
 
 .logo a {
-  text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00, 0 0 30px #ccff00;
+  text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00;
+  z-index: 10000;
 }
 
 .hamburger {
@@ -59,13 +71,13 @@
 }
 
 .hamburger-menu {
-  background-color: rgba(47, 46, 58, 0.9);
+  background-color: #302f38;
   z-index: 100;
-  position: absolute;
+  position: fixed;
   right: 0;
   backdrop-filter: blur(3px) contrast(60%);
   -webkit-backdrop-filter: blur(3px) contrast(60%);
-  top: 3em;
+  top: 4em;
   bottom: 0;
   left: 0px;
   display: flex;
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index 002cbb3..ba51322 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -1,6 +1,6 @@
 function Contact() {
   return (
-    <div className="container">
+    <div className="container content">
       <h1>Welcome to Contact</h1>
     </div>
   );
diff --git a/src/pages/Experience.jsx b/src/pages/Experience.jsx
index 1e0123a..ed8dbe1 100644
--- a/src/pages/Experience.jsx
+++ b/src/pages/Experience.jsx
@@ -1,6 +1,6 @@
 function Experiance() {
   return (
-    <div className="container">
+    <div className="container content">
       <h1>Welcome to Experiance</h1>
     </div>
   );
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 9d07bc3..8c7d7ce 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,8 +1,75 @@
+import {
+  Animator,
+  ScrollContainer,
+  ScrollPage,
+  batch,
+  Fade,
+  FadeIn,
+  FadeOut,
+  Move,
+  MoveIn,
+  MoveOut,
+  Sticky,
+  StickyIn,
+  StickyOut,
+  Zoom,
+  ZoomIn,
+  ZoomOut,
+} from "react-scroll-motion";
+
 function Home() {
+  const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
+  const FadeUp = batch(Fade(), Move(), Sticky());
+
   return (
-    <div className="container">
-      <h1>Welcome to Home + About me</h1>
-    </div>
+    <ScrollContainer>
+      <ScrollPage>
+        <Animator animation={batch(Fade(), Sticky(), MoveOut(0, 200))}>
+          <span>Let me show you scroll animation 😀</span>
+        </Animator>
+      </ScrollPage>
+
+      <ScrollPage>
+        <Animator animation={ZoomInScrollOut}>
+          <span style={{ fontSize: "40px" }}>I'm FadeUpScrollOut ✨</span>
+        </Animator>
+      </ScrollPage>
+
+      <ScrollPage>
+        <Animator animation={FadeUp}>
+          <span style={{ fontSize: "40px" }}>I'm FadeUp ⛅️</span>
+        </Animator>
+      </ScrollPage>
+
+      <ScrollPage>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+          }}
+        >
+          <span style={{ fontSize: "40px" }}>
+            <Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator>
+            <Animator animation={MoveIn(1000, 0)}>Nice to meet you 🙋🏻‍♀️</Animator>
+            - I'm Dante Chun -
+            <Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator>
+            <Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator>
+          </span>
+        </div>
+      </ScrollPage>
+
+      <ScrollPage>
+        <Animator animation={batch(Fade(), Sticky())}>
+          <span style={{ fontSize: "40px" }}>Done</span>
+          <br />
+          <span style={{ fontSize: "30px" }}>
+            There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
+          </span>
+        </Animator>
+      </ScrollPage>
+    </ScrollContainer>
   );
 }