Optimize home page

src/components/Explore/Random.tsx

@@ -155,7 +155,9 @@ const RandomAnimation: FC<IRandomAnimationProps> = ({
         top: curtainDown,
       }}
     >
-      <AnimatedTitle {...{ spring: animatedName, title, AnimatedTag: a.h2 }} />
+      <h2>
+        <AnimatedTitle title={title} />
+      </h2>
       <a.h3 style={{ opacity: titleOpacity }}>{student_name}</a.h3>
       <div className="position-absolute">
         <Rolling20 {...Rolling20Props} />

src/components/Shared/AnimatedTitle.tsx

@@ -1,5 +1,11 @@
-import React, { FC } from "react";
-import { AnimatedComponent, SpringValue } from "react-spring";
+import React, { FC, useMemo } from "react";
+import {
+  AnimatedComponent,
+  SpringValue,
+  useSpring,
+  config as springConfig,
+  animated,
+} from "react-spring";
 import he from "he";
 
 const ANIMATE_RANGE = 70;
@@ -29,21 +35,21 @@ export const mapSpringToString = (x: number, text: string): any => {
 };
 
 interface IAnimateTitleProps {
-  spring: SpringValue<number>;
   title: string;
-  classNames?: string;
-  AnimatedTag: AnimatedComponent<"h1"> | AnimatedComponent<"h2">;
 }
-export const AnimatedTitle: FC<IAnimateTitleProps> = ({
-  title,
-  spring,
-  AnimatedTag,
-  classNames = "",
-}) => {
+export const AnimatedTitle: FC<IAnimateTitleProps> = ({ title }) => {
+  const spring = useSpring({
+    config: { mass: 1, tension: 200, friction: 60 },
+    from: { completion: 0 },
+    to: { completion: 1 },
+  });
+
+  const decodedText = useMemo(() => he.decode(title).toUpperCase(), [title]);
+
   return (
-    <AnimatedTag className={classNames}>
-      {spring.to((x) => mapSpringToString(x, he.decode(title).toUpperCase()))}
-    </AnimatedTag>
+    <animated.div>
+      {spring.completion.to((x) => mapSpringToString(x, decodedText))}
+    </animated.div>
   );
 };
 

src/components/Shared/BigHeader.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useContext } from "react";
-import { useSpring, animated as a, config as springConfig } from "react-spring";
+import React, { useCallback, useEffect, useContext, useState } from "react";
+import { animated as a } from "react-spring";
 import { Context } from "../../util/contexts";
 import { connect } from "util/homemadeRedux/connect";
 import { addMessageAction } from "util/homemadeRedux/actions";
@@ -35,43 +35,53 @@ interface IHeaderSpringProps {
   addMessage: (text: string, autoDisappear: boolean) => void;
 }
 
+interface AnimationState {
+  height: number;
+  titleAnimation: number;
+}
+
+const animationDuration = 1.5;
+
 const HeaderSpring = ({
   collapse,
   isAtHomePage,
   addMessage,
 }: IHeaderSpringProps) => {
   const { windowSize, navigatorPlatform } = useContext(Context);
   const windowHeight = windowSize[1];
-  const [spring, setSpring] = useSpring(() => ({
-    from: {
-      height: 0,
-      titleAnimation: 0,
-    },
-    to: async (next: any) => {
-      next({ height: HEADER_HEIGHT_IN_VH, config: springConfig.default });
-      next({
-        titleAnimation: 1,
-        config: { mass: 1, tension: 200, friction: 60 },
-      });
-    },
-  }));
+  const [animation, setAnimation] = useState<AnimationState>({
+    height: 0,
+    titleAnimation: 0,
+  });
+
+  const [animationComplete, setAnimationComplete] = useState<boolean>(false);
+
+  useEffect(() => {
+    setAnimation((prevState) => ({
+      ...prevState,
+      height: HEADER_HEIGHT_IN_VH,
+    }));
+
+    setTimeout(() => {
+      setAnimationComplete(true);
+    }, animationDuration * 1000);
+  }, []);
+
   const collapseHeaderAndShowMessage = useCallback(() => {
     //@ts-ignore
-    setSpring({
+    setAnimation({
       height: 0,
       titleAnimation: 1,
-      config: { mass: 1, tension: 200, friction: 60 },
     });
-    collapse &&
-      isAtHomePage &&
-      !navigatorPlatform?.isMobile &&
+
+    if (collapse && isAtHomePage && !navigatorPlatform?.isMobile)
       addMessage(
         `Drag ${
           navigatorPlatform?.isMac ? "or scroll " : ""
         }to explore, click to Read More.`,
         true
       );
-  }, [setSpring, collapse, addMessage, isAtHomePage, navigatorPlatform]);
+  }, [collapse, addMessage, isAtHomePage, navigatorPlatform]);
 
   useEffect(collapseHeaderAndShowMessage, [collapse]);
 
@@ -80,37 +90,33 @@ const HeaderSpring = ({
   }, [isAtHomePage]);
 
   useEffect(() => {
-    //@ts-ignore
-    setSpring({
+    setAnimation({
       height: collapse
         ? 0
         : HEADER_HEIGHT_IN_VH - pxToVh(document.body.scrollTop, windowHeight),
       titleAnimation: 1,
     });
-  }, [windowHeight, setSpring, collapse]);
+  }, [windowHeight, collapse]);
 
   const Rolling20Props: IRolling20Props = {
-    heightInVh: spring!.height,
+    heightInVh: animation.height,
     rows: BG_ROWS,
     speed: BG_SCROLL_SPEED,
     targetVH: HEADER_HEIGHT_IN_VH,
   };
 
   return !isAtHomePage ? null : (
-    <a.div
+    <div
       id="header2020-container"
       style={{
-        height: spring.height.to((height) => `${height}vh`),
+        height: `${animation.height}vh`,
       }}
     >
-      <AnimatedTitle
-        classNames={"position-absolute"}
-        AnimatedTag={a.h1}
-        title={`THESIS\nARCHIVE`}
-        spring={spring.titleAnimation}
-      />
+      <h1 className="position-absolute">
+        <AnimatedTitle title={`THESIS\nARCHIVE`} />
+      </h1>
       <Rolling20 {...Rolling20Props} />
-    </a.div>
+    </div>
   );
 };
 

src/scss/styles.scss

@@ -131,6 +131,8 @@ a {
       font-size: 12em;
     }
   }
+
+  transition: height 1s ease-out;
 }
 
 .svg2020-animation-container {