updates

components/actions/TextShuffler.jsx

@@ -1,42 +1,73 @@
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useEffect, useState } from 'react';
+import { gsap } from "gsap";
 
 let timer = 0;
 let keyNum = 0;
 let textTimeout;
-let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
+// let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
 
-const TextShuffler = ({ textInput }) => {
+const TextShuffler = ({ textInput, delay }) => {
 
     let [text, setText] = useState(textInput);
     let [refresh, setRefresh] = useState(0);
+    let [readyState, setReadyState] = useState(false);
+
+    const spanRef = React.useRef();
 
     useEffect(() => {
+        const spanObserver = new IntersectionObserver((entries, observer) => {
+            if (entries[0].isIntersecting) {
+                requestAnimationFrame(() => {
+                    if (delay) {
+                        setTimeout(() => {
+                            gsap.to(spanRef.current, {
+                                opacity: 1,
+                                duration: 2
+                            });
 
-        let shuffledText = () => {
-            let textArray = textInput.split("");
-            let newTextArray = [];
-            textArray.forEach(char => {
-                if (char === " ") {
-                    return newTextArray.push(" ")
-                }
-                newTextArray.push(chars[Math.floor(Math.random() * 85)])
-            })
+                            setReadyState(true);
+                        }, delay);
+                    } else {
+                        gsap.to(spanRef.current, {
+                            opacity: 1,
+                            duration: 2
+                        });
 
-            return newTextArray.join("");
-        }
+                        setReadyState(true);
+                    }
+                })
 
-        textTimeout = setTimeout(() => {
-            if (timer === 7) {
-                setText(textInput);
-                return window.clearTimeout(textTimeout);
-            };
-            setText(prev => prev);
-            setRefresh(prev => prev + 1);
-            timer++
-        }, 200);
+                observer.unobserve(spanRef.current)
+            }
+
+        }, {
+            rootMargin: "0px 0px 0px 0px"
+        });
+
+        spanObserver.observe(spanRef.current)
+    }, [])
+
+    useEffect(() => {
+        if (!readyState) return;
+
+        requestAnimationFrame(() => {
+            textTimeout = setTimeout(() => {
+                if (timer === 7) {
+                    setText(textInput);
+                    return window.clearTimeout(textTimeout);
+                };
+
+                setRefresh(prev => prev + 1);
+                timer++
+            }, 300);
+        })
     }, [refresh])
 
-    return (<span className="shuffled-text-span">{text.split("").map(char => <span key={keyNum++} style={{ animationDelay: Math.random() + "s", animationDuration: (Math.random() * 2) + "s" }}>{char}</span>)}</span>)
+    return (
+        <span className="shuffled-text-span" ref={ spanRef } style={ { opacity: 0 } }>
+            { text.split("").map(char => <span key={ keyNum++ } style={ { animationDelay: Math.random() * 1.5 + "s", animationDuration: (Math.random() * 2) + "s" } }>{ char }</span>) }
+        </span>
+    )
 }
 
 export default TextShuffler