[feat] transitions and logo on container

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/components/Container.js

@@ -1,28 +1,199 @@
-import { css } from "emotion";
+import React, { useEffect, useRef, useLayoutEffect } from "react";
-
+import { css, cx } from "emotion";
-const Container = ({ children, ...props }) => (
+import { Link, navigate } from "@reach/router";
-	<div
+
-		className={css`
+import { ReactComponent as Logo } from "../assets/logo.svg";
-			background: #000;
+import { ReactComponent as Right } from "../assets/arrow-right.svg";
-			padding: calc(100vw / 8);
+
-			overflow-x: hidden;
+const flash = css`
-			min-height: 100vh;
+	span& {
-		`}>
+		width: 5.6rem;
+		height: 5.6rem;
+		opacity: 100%;
+		top: -0.3rem;
+		left: -0.3rem;
+	}
+`;
+
+const clearable = new Set();
+
+const Container = ({ children, hideNav = false, next, ...props }) => {
+	const logoContainer = useRef();
+	const logo = useRef();
+	const highlightCircle = useRef();
+	const containerChild = useRef();
+	const nextBtn = useRef();
+
+	children = React.Children.map(children, child => {
+		return React.cloneElement(child, {
+			style: { opacity: 0, marginBottom: "5rem", transition: "all 300ms" },
+		});
+	});
+
+	useEffect(() => {
+		/* to prevent the scrollbar janking while animating;
+			doesn't work consistently; must investigate */
+		document.body.style.maxHeight = "100vh";
+		document.body.style.overflow = "hidden";
+
+		if (highlightCircle.current) {
+			highlightCircle.current.classList.add(flash);
+			clearable.add(
+				setTimeout(
+					() => highlightCircle.current && highlightCircle.current.classList.remove(flash),
+					1500,
+				),
+			);
+		}
+
+		if (nextBtn.current) {
+			nextBtn.current.style.width = "4rem";
+			setTimeout(() => nextBtn.current && (nextBtn.current.style.right = "10vw"), 300);
+		}
+
+		if (containerChild.current) {
+			const containerChildren = [...containerChild.current.children];
+			containerChildren.forEach((child, idx) => {
+				setTimeout(() => {
+					child.style.removeProperty("opacity");
+					child.style.removeProperty("margin-bottom");
+				}, 100 * idx);
+			});
+
+			setTimeout(() => {
+				document.body.style.maxHeight = "auto";
+				document.body.style.overflow = "auto";
+			}, containerChildren.length * 100);
+		}
+
+		// cleanup
+		return () => (clearable.forEach(item => clearTimeout(item)), clearable.clear());
+	}, []);
+
+	const handleResize = () => {
+		if (logoContainer.current)
+			logoContainer.current.style.left = `${containerChild.current.getBoundingClientRect().x}px`;
+	};
+
+	useEffect(() => {
+		window.addEventListener("resize", handleResize);
+
+		// cleanup
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+
+	// on first render
+	useLayoutEffect(handleResize, []);
+
+	const handleNext = e => {
+		if (containerChild.current) {
+			[...containerChild.current.children].forEach(child => {
+				child.style.marginBottom = "2rem";
+				child.style.opacity = "0";
+			});
+		}
+		e.currentTarget.style.width = 0;
+		setTimeout(() => navigate(next), 300);
+	};
+
+	return (
 		<div
 			className={css`
-				width: 100%;
+				background: var(--background-color);
-				max-width: 60rem;
+				padding: 15rem calc(100vw / 8) 8rem calc(100vw / 8);
-				min-height: 100%;
+				overflow-x: hidden;
-				margin: auto;
+				min-height: 100vh;
-
+				position: relative;
-				& > * {
+			`}>
-					margin-bottom: 2rem;
+			{!hideNav && (
-				}
+				<Link
-			`}
+					to={"/" + Math.random().toString(16).slice(2)}
-			{...props}>
+					ref={logoContainer}
-			{children}
+					className={css`
+						position: absolute;
+						top: 8rem;
+						left: 5rem;
+
+						&:hover .logo-highlight {
+							width: 5.2rem;
+							height: 5.2rem;
+							opacity: 100%;
+							top: -0.1rem;
+							left: -0.1rem;
+						}
+					`}>
+					<span
+						ref={highlightCircle}
+						className={cx(
+							css`
+								position: absolute;
+								width: 5rem;
+								height: 5rem;
+								border-radius: 100%;
+								background: var(--primary-color);
+								z-index: 0;
+								opacity: 0%;
+
+								transition: all 300ms;
+							`,
+							"logo-highlight",
+						)}></span>
+					<Logo
+						ref={logo}
+						className={css`
+							position: absolute;
+							height: 5rem;
+							width: 5rem;
+							border-radius: 100%;
+							box-shadow: 0px 0px 50px 0px rgba(100, 100, 100, 0.65);
+						`}
+					/>
+				</Link>
+			)}
+			{next && (
+				<button
+					onClick={handleNext}
+					ref={nextBtn}
+					className={css`
+						position: fixed;
+						right: 14vw;
+						bottom: 10vh;
+						z-index: 1000;
+						background: none;
+						padding: 0;
+						font-weight: 500;
+						cursor: pointer;
+						letter-spacing: 0.2rem;
+						border: none;
+						overflow: hidden;
+						width: 0;
+						transition: all 300ms;
+						overflow: hidden;
+
+						&:hover * {
+							fill: var(--primary-color);
+						}
+					`}>
+					<Right />
+				</button>
+			)}
+			<div
+				className={css`
+					width: 100%;
+					max-width: 60rem;
+					min-height: 100%;
+					margin: auto;
+
+					& > * {
+						margin-bottom: 2rem;
+					}
+				`}
+				ref={containerChild}
+				{...props}>
+				{children}
+			</div>
 		</div>
-	</div>
+	);
-);
+};
 
 export default Container;