diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index fd77b1d..b72395e 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -9,7 +9,11 @@ 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";
+import {
+ CSSTransition,
+ TransitionGroup,
+ SwitchTransition,
+} from "react-transition-group";
export default function Me() {
// figure out what content to render from here
@@ -51,18 +55,18 @@ export default function Me() {
-
+
{getCurrentContent()}
-
+
);
diff --git a/packages/web/styles/globals.css b/packages/web/styles/globals.css
index 377ac38..4fffc44 100644
--- a/packages/web/styles/globals.css
+++ b/packages/web/styles/globals.css
@@ -194,8 +194,7 @@ li.slick-active button {
.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;
+ transition: opacity 200ms linear 100ms, transform 200ms ease-in-out 100ms;
}
/* slide exit */
@@ -206,7 +205,7 @@ li.slick-active button {
.slide-exit.slide-exit-active {
opacity: 0;
transform: scale(0.97) translateY(5px);
- transition: opacity 200ms linear, transform 200ms ease-out;
+ transition: opacity 100ms linear, transform 100ms ease-out;
}
.slide-exit-done {
opacity: 0;