Disable hero/timeline animations on small screens

Author: davidbingmann

src/pages/Home.jsx

@@ -4,16 +4,26 @@ import profilePicture1200 from '../assets/profile_picture_1200.jpeg';
 import profilePicture2000 from '../assets/profile_picture_2000.jpeg';
 
 export default function Home() {
-  const [typedCount, setTypedCount] = useState(0);
-  const [hidePrompt, setHidePrompt] = useState(false);
-  const [reduceMotion, setReduceMotion] = useState(false);
-  const promptRef = useRef(null);
-  const [promptWidth, setPromptWidth] = useState(0);
-
   const fullPrompt = '~ cd';
   const fullPath = 'davidbingmann/.';
   const totalLength = fullPrompt.length + fullPath.length;
 
+  const [reduceMotion, setReduceMotion] = useState(() =>
+    typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
+  const [isSmallScreen, setIsSmallScreen] = useState(() =>
+    typeof window !== 'undefined' && window.matchMedia('(max-width: 720px)').matches
+  );
+  const disableHeroAnimation = reduceMotion || isSmallScreen;
+
+  const [typedCount, setTypedCount] = useState(() =>
+    disableHeroAnimation ? totalLength : 0
+  );
+  const [hidePrompt, setHidePrompt] = useState(() => disableHeroAnimation);
+  const promptRef = useRef(null);
+  const [promptWidth, setPromptWidth] = useState(0);
+
   const promptText = fullPrompt.slice(0, Math.min(typedCount, fullPrompt.length));
   const pathText =
     typedCount > fullPrompt.length
@@ -26,16 +36,34 @@ export default function Home() {
 
   useEffect(() => {
     const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-    const handleMotionChange = () => setReduceMotion(motionQuery.matches);
+    const handleMotionChange = (event) => setReduceMotion(event.matches);
 
-    handleMotionChange();
-    motionQuery.addEventListener('change', handleMotionChange);
+    setReduceMotion(motionQuery.matches);
+    if (motionQuery.addEventListener) {
+      motionQuery.addEventListener('change', handleMotionChange);
+      return () => motionQuery.removeEventListener('change', handleMotionChange);
+    }
 
-    return () => motionQuery.removeEventListener('change', handleMotionChange);
+    motionQuery.addListener(handleMotionChange);
+    return () => motionQuery.removeListener(handleMotionChange);
   }, []);
 
   useEffect(() => {
-    if (reduceMotion) {
+    const screenQuery = window.matchMedia('(max-width: 720px)');
+    const handleScreenChange = (event) => setIsSmallScreen(event.matches);
+
+    setIsSmallScreen(screenQuery.matches);
+    if (screenQuery.addEventListener) {
+      screenQuery.addEventListener('change', handleScreenChange);
+      return () => screenQuery.removeEventListener('change', handleScreenChange);
+    }
+
+    screenQuery.addListener(handleScreenChange);
+    return () => screenQuery.removeListener(handleScreenChange);
+  }, []);
+
+  useEffect(() => {
+    if (disableHeroAnimation) {
       setTypedCount(totalLength);
       setHidePrompt(true);
       return undefined;
@@ -53,10 +81,10 @@ export default function Home() {
     return () => {
       clearInterval(timer);
     };
-  }, [reduceMotion, totalLength]);
+  }, [disableHeroAnimation, totalLength]);
 
   useEffect(() => {
-    if (reduceMotion) {
+    if (disableHeroAnimation) {
       return undefined;
     }
 
@@ -65,13 +93,18 @@ export default function Home() {
       return () => clearTimeout(timer);
     }
     return undefined;
-  }, [reduceMotion, typedCount, totalLength]);
+  }, [disableHeroAnimation, typedCount, totalLength]);
 
   useEffect(() => {
+    if (disableHeroAnimation) {
+      return undefined;
+    }
+
     if (promptText.length === fullPrompt.length && promptRef.current) {
       setPromptWidth(promptRef.current.getBoundingClientRect().width);
     }
-  }, [promptText, fullPrompt.length]);
+    return undefined;
+  }, [disableHeroAnimation, promptText, fullPrompt.length]);
 
   return (
     <div className="home">

src/styles.css

@@ -428,9 +428,14 @@ p {
   }
 
   .hero-content {
+    animation: none;
     padding: 0 1.25rem 2rem;
   }
 
+  .hero-command .prompt {
+    transition: none;
+  }
+
   .section-body {
     padding: 1.5rem;
   }
@@ -440,7 +445,9 @@ p {
   }
 
   .timeline-item {
-    animation-delay: 0ms !important;
+    opacity: 1;
+    transform: none;
+    animation: none;
   }
 }