adding stuff

packages/web/package.json

@@ -27,6 +27,7 @@
     "react-hotkeys": "^2.0.0",
     "react-icons": "^4.3.1",
     "react-moment": "^1.1.1",
+    "react-transition-group": "^4.4.2",
     "recoil": "^0.6.1",
     "uuid": "^8.3.2"
   },

packages/web/pages/s/index.tsx

@@ -9,6 +9,7 @@ import Header from "../../components/v2/Header";
 import Later from "../../components/v2/Later";
 import Sidebar from "../../components/v2/Sidebar";
 import { currPagePath } from "../../recoil/main";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 export default function Me() {
   // figure out what content to render from here
@@ -50,9 +51,18 @@ export default function Me() {
       <div className="flex-1 flex flex-row items-stretch">
         <Sidebar />
 
-        <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
-          {getCurrentContent()}
-        </div>
+        <TransitionGroup>
+          <CSSTransition
+            appear={true}
+            key={Math.random()}
+            timeout={1200}
+            classNames="slide"
+          >
+            <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
+              {getCurrentContent()}
+            </div>
+          </CSSTransition>
+        </TransitionGroup>
       </div>
     </div>
   );

packages/web/styles/globals.css

@@ -183,3 +183,31 @@ li.slick-active button {
     transform: translateY(-385%);
   }
 }
+
+/* CSS transition for react */
+/* slide enter */
+.slide-enter {
+  opacity: 0;
+  transform: scale(0.95) translateY(5px);
+  z-index: 1;
+}
+.slide-enter.slide-enter-active {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: opacity 500ms linear 500ms, transform 500ms ease-in-out 500ms;
+  transition-delay: 500ms;
+}
+
+/* slide exit */
+.slide-exit {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+.slide-exit.slide-exit-active {
+  opacity: 0;
+  transform: scale(0.97) translateY(5px);
+  transition: opacity 200ms linear, transform 200ms ease-out;
+}
+.slide-exit-done {
+  opacity: 0;
+}