From 01d578b6dd5252305ce3d1a1a49336d3f7edc697 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 1 Feb 2022 22:50:18 +0100
Subject: chore: animate branding

---
 src/components/Branding/Branding.tsx | 38 ++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

(limited to 'src/components/Branding/Branding.tsx')

diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
index 317a8f3..517deb8 100644
--- a/src/components/Branding/Branding.tsx
+++ b/src/components/Branding/Branding.tsx
@@ -4,7 +4,7 @@ import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { ReactElement } from 'react';
+import { ReactElement, useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Person, WithContext } from 'schema-dts';
 import styles from './Branding.module.scss';
@@ -16,6 +16,36 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
   const intl = useIntl();
   const { locale } = useRouter();
   const TitleTag = isHome ? 'h1' : 'p';
+  const logoRef = useRef<HTMLDivElement>(null);
+  const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
+  const jobRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (logoRef.current) {
+      logoRef.current.style.setProperty(
+        '--branding-logo-animation',
+        'flip-logo 5.4s ease-in 0s 1'
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    if (titleRef.current) {
+      titleRef.current.style.setProperty(
+        '--branding-name-animation',
+        'blink 0.5s ease-in-out 0s 1, branding-name-typing 2.8s linear 0s 1'
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    if (jobRef.current) {
+      jobRef.current.style.setProperty(
+        '--branding-job-animation',
+        'branding-job-typing 7s linear 0s 1, Blink 0.8s ease-in-out 5s 3'
+      );
+    }
+  }, []);
 
   const schemaJsonLd: WithContext<Person> = {
     '@context': 'https://schema.org',
@@ -39,7 +69,7 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
         ></script>
       </Head>
       <div id="branding" className={styles.wrapper}>
-        <div className={styles.logo}>
+        <div className={styles.logo} ref={logoRef}>
           <div className={styles.logo__front}>
             <Image
               src={photo}
@@ -59,12 +89,12 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
             <Logo />
           </div>
         </div>
-        <TitleTag className={styles.name}>
+        <TitleTag ref={titleRef} className={styles.name}>
           <Link href="/">
             <a className={styles.link}>{settings.name}</a>
           </Link>
         </TitleTag>
-        <p className={styles.job}>
+        <p ref={jobRef} className={styles.job}>
           {locale?.startsWith('en')
             ? settings.baseline.en
             : settings.baseline.fr}
-- 
cgit v1.2.3