Add WaveSection animation and improve AnimateWhenInViewport component

aliebald · aliebald · commit eaf15708be00 · 2022-09-14T23:13:59.000+02:00
diff --git a/components/Atoms/AnimateWhenInViewport/AnimateWhenInViewport.tsx b/components/Atoms/AnimateWhenInViewport/AnimateWhenInViewport.tsx
@@ -1,41 +1,61 @@
-import { Ref, ReactElement, cloneElement, DetailedReactHTMLElement, MutableRefObject } from "react";
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, cloneElement } from "react";
 
 export interface Animation {
 	initDelay?: number;
 	threshold?: number;
+	noHide?: boolean;
+	type?: "slideUp" | "slideDown" | "growYUp" | "growYDown";
 }
 
 interface AnimateWhenInViewportProps<T> extends Animation {
 	children: JSX.Element;
+	wrapperClassName?: string;
 }
 
 export default function AnimateWhenInViewport<T extends HTMLElement>({
 	children,
+	wrapperClassName = "",
 	initDelay = 0,
 	threshold = 0,
+	noHide,
+	type,
 }: AnimateWhenInViewportProps<T>) {
 	const ref = useRef<T | null>(null);
 	const [initTime, setInitTime] = useState(performance.now());
 
+	// Wait for element to be in viewport, then start the animation.
 	useEffect(() => {
 		if (!ref.current) return;
 
-		const hideElement = (elem: HTMLElement | null) => {
-			if (elem && !elem.classList.contains("hidden")) {
+		/**
+		 * Add `hidden` css class to `elem` HTMLElement.
+		 */
+		const hideElement = (elem: HTMLElement) => {
+			if (!noHide && !elem.classList.contains("hidden")) {
 				elem.classList.add("hidden");
 			}
 		};
 
-		const applyAnimation = (elem: HTMLElement | null) => {
-			if (!elem) return;
-
+		/**
+		 * Removes `hidden` and adds `animation` class to `elem` HTMLElement.
+		 * Disconnects observer afterwards.
+		 */
+		const applyAnimation = (elem: HTMLElement) => {
 			elem.classList.add("animation");
 			elem.classList.remove("hidden");
 			observer.disconnect();
 		};
 
-		const options = {
+		/**
+		 * Applies a delayed animation. {@see applyAnimation}.
+		 */
+		const delayAnimation = (elem: HTMLElement, wait: number) => {
+			hideElement(elem);
+			elem.style.animationDelay = `${Math.round(wait)}ms`;
+			applyAnimation(elem);
+		};
+
+		const observerOptions = {
 			threshold,
 		};
 
@@ -45,26 +65,25 @@ export default function AnimateWhenInViewport<T extends HTMLElement>({
 			if (entries[0].isIntersecting && entries[0].intersectionRatio >= threshold) {
 				const timeSinceInit = performance.now() - initTime;
 				const wait = initDelay - timeSinceInit;
-				console.log("wait", Math.round(wait));
 
 				if (!initDelay || wait <= 0) {
 					applyAnimation(ref.current);
 				} else {
-					hideElement(ref.current);
-					setTimeout(() => applyAnimation(ref.current), wait);
+					delayAnimation(ref.current, wait);
 				}
 				return;
 			}
 
+			// Hide element on page load.
 			hideElement(ref.current);
-		}, options);
+		}, observerOptions);
 
 		observer.observe(ref.current);
 
 		return () => {
 			observer.disconnect();
 		};
-	}, [initDelay, initTime, ref, threshold]);
+	}, [initDelay, initTime, noHide, ref, threshold]);
 
 	/**
 	 * Set `ref.current` to `current`, if not null.
@@ -75,5 +94,9 @@ export default function AnimateWhenInViewport<T extends HTMLElement>({
 		}
 	};
 
-	return <div className="animation-wrapper">{cloneElement(children, { ref: updateRef })}</div>;
+	return (
+		<div className={`${wrapperClassName} animation-wrapper`}>
+			{cloneElement(children, { ref: updateRef, className: `${children.props.className} ${type ?? ""}` })}
+		</div>
+	);
 }
diff --git a/components/Molecules/WaveSection/WaveSection.tsx b/components/Molecules/WaveSection/WaveSection.tsx
@@ -1,9 +1,10 @@
-import Image from "next/image";
-import { createStyles, Transition, useMantineColorScheme } from "@mantine/core";
+import Image, { ImageProps } from "next/image";
+import { createStyles, useMantineColorScheme } from "@mantine/core";
 
 // SVG's
 import wavesLight from "../../../public/images/waves-light.svg";
 import wavesDark from "../../../public/images/waves-dark.svg";
+import AnimateWhenInViewport from "../../Atoms/AnimateWhenInViewport/AnimateWhenInViewport";
 
 interface WaveSpacerProps {
 	children: JSX.Element | JSX.Element[];
@@ -19,7 +20,7 @@ const useStyles = createStyles((theme, _params) => ({
 	rotate: {
 		transform: "rotate(180deg)",
 	},
-	children: {
+	background: {
 		backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
 	},
 }));
@@ -28,18 +29,22 @@ export default function WaveSection({ children }: WaveSpacerProps) {
 	const { colorScheme } = useMantineColorScheme();
 	const { classes } = useStyles();
 
-	const img =
-		colorScheme === "dark" ? (
-			<Image priority src={wavesDark} alt="Background" layout="fill" objectFit="cover" />
-		) : (
-			<Image priority src={wavesLight} alt="Background" layout="fill" objectFit="cover" />
-		);
+	const imgSrc = colorScheme === "dark" ? wavesDark : wavesLight;
+
+	const imgTop = <Image priority src={imgSrc} alt="Background" layout="fill" objectFit="cover" />;
+	const imgBottom = (
+		<Image priority src={imgSrc} alt="Background" layout="fill" objectFit="cover" className={classes.rotate} />
+	);
 
 	return (
 		<>
-			<div className={classes.waves}>{img}</div>
-			<div className={classes.children}>{children}</div>
-			<div className={`${classes.waves} ${classes.rotate}`}>{img}</div>
+			<AnimateWhenInViewport type="growYUp" noHide>
+				<div className={`${classes.waves} ${classes.background}`}>{imgTop}</div>
+			</AnimateWhenInViewport>
+			<div className={classes.background}>{children}</div>
+			<AnimateWhenInViewport type="growYDown" noHide>
+				<div className={`${classes.waves} ${classes.background}`}>{imgBottom}</div>
+			</AnimateWhenInViewport>
 		</>
 	);
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -50,10 +50,6 @@ a {
   animation: slideUp .7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
 }
 
-.animation-down {
-  animation: slideDown .7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
-}
-
 .animation.inf {
   animation-iteration-count: infinite;
 }
@@ -98,14 +94,13 @@ a {
   animation-delay: .8s;
 }
 
-/* =============================== 
- *  Global Animations - Keyframes
- * =============================== */
-
+/* =============================================================== 
+ *  Global Animations - Keyframes & CSS Specific to each Keyframe
+ * =============================================================== */
 
 @keyframes slideUp {
   0% {
-    transform: translateY(150px) scale(.5);
+    transform: translateY(100px) scale(.5);
     opacity: 0;
   }
 
@@ -119,20 +114,34 @@ a {
   }
 }
 
-@keyframes slideDown {
+.animation.growYUp {
+  animation-name: growYUp;
+  transform-origin: bottom;
+  animation-duration: 1s;
+}
+
+@keyframes growYUp {
   0% {
-    transform: translateY(200px);
-    transform-origin: 50% 50%;
-    opacity: 0;
+    transform: scaleY(.5);
   }
 
-  10% {
-    opacity: .3;
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+.animation.growYDown {
+  animation-name: growYDown;
+  transform-origin: top;
+  animation-duration: 1s;
+}
+
+@keyframes growYDown {
+  0% {
+    transform: scaleY(.5);
   }
 
   100% {
-    transform: translateY(0);
-    transform-origin: 100% 0%;
-    opacity: 1;
+    transform: scaleY(1);
   }
 }
