Adding opacity transition to hero dynamic titles

Author: mariana-caldas

components/Hero.js

@@ -14,13 +14,21 @@ export default function Hero({
   titleClass,
 }) {
   const [titleIndex, setTitleIndex] = useState(0);
-  const handleTitleIndex = () =>
+  const handleTitleIndex = () => {
     setTitleIndex(titleIndex >= dynamicTitles.length - 1 ? 0 : titleIndex + 1);
+  };
 
   useEffect(() => {
-    setTimeout(handleTitleIndex, 1350);
+    const dynamicTitleEl = document.getElementById('dynamicTitle');
+    if (dynamicTitleEl.style.opacity === '1') {
+      dynamicTitleEl.style.opacity = '0';
+    } else {
+      dynamicTitleEl.style.opacity = '1';
+    }
   }, [titleIndex]);
 
+  setTimeout(handleTitleIndex, 1750);
+
   return (
     <div
       className={`${styles.header} ${customClass ? styles[customClass] : ''}`}
@@ -39,7 +47,9 @@ export default function Hero({
         <div className={styles.header__content__upper}>
           <h1 className={titleClass ? `${styles[titleClass]}` : ''}>
             {title}
-            {dynamicTitles && <span> {dynamicTitles[titleIndex]}</span>}
+            {dynamicTitles && (
+              <span id="dynamicTitle"> {dynamicTitles[titleIndex]}</span>
+            )}
           </h1>
         </div>
         <div className={styles.header__content__bottom}>

styles/Hero.module.scss

@@ -27,6 +27,8 @@
         font-style: italic;
         font-weight: bold;
         line-height: 3.5rem;
+        opacity: 1;
+        @include transition(opacity 1.55s ease-in-out);
         @include desktop {
           font-size: 4.5rem;
           line-height: 5rem;

utils/hero-options.js

@@ -3,7 +3,7 @@ export const heroOptions = {
     imgBg: '/images/home-bg.png',
     imgAlt: 'Homepage',
     title: 'Web Dev Path is about',
-    dynamicTitles: ['community', 'learning', 'growth'],
+    dynamicTitles: ['community', 'learning', 'growth', 'teamwork'],
     content:
       'We help junior tech professionals, such as developers and designers, to grow.',
   },