feat: start animation when user scrolls the terminal into view

package.json

@@ -52,6 +52,7 @@
     "react-shadow": "^18.4.2",
     "react-simple-code-editor": "^0.11.0",
     "react-typist": "^2.0.5",
+    "react-use": "^15.3.4",
     "snyk": "^1.401.0",
     "use-dark-mode": "^2.3.1",
     "use-media": "^1.4.0",

src/components/Terminal/Shell.js

@@ -1,31 +1,43 @@
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, {
+  forwardRef,
+  useState,
+  useRef,
+  useLayoutEffect,
+  useImperativeHandle,
+} from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import Command from './Command';
 import theme from './theme';
 import rollupIntoCommands from './rollupIntoCommands';
 
-const Shell = ({ animate, highlight, code }) => {
-  const ref = useRef();
+const Shell = forwardRef(({ animate, highlight, code }, ref) => {
+  const shellRef = useRef();
   const [animated, setAnimated] = useState(false);
   const [height, setHeight] = useState(null);
-  const [step, setStep] = useState(1);
   const { tokens, getTokenProps } = highlight;
   const commands = rollupIntoCommands(tokens, code);
-  const shownCommands = animated ? commands.slice(0, step) : commands;
+  const [shownCommands, setShownCommands] = useState(commands);
+
+  useImperativeHandle(ref, () => ({
+    startAnimation: () => {
+      setAnimated(true);
+      setShownCommands(commands.slice(0, 1));
+    },
+  }));
 
   useLayoutEffect(() => {
-    const { height } = ref.current.getBoundingClientRect();
+    const { height } = shellRef.current.getBoundingClientRect();
     setHeight(height);
 
     if (animate) {
-      setAnimated(true);
+      setShownCommands([]);
     }
   }, [animate]);
 
   return (
     <pre
-      ref={ref}
+      ref={shellRef}
       css={css`
         ${theme};
 
@@ -67,14 +79,16 @@ const Shell = ({ animate, highlight, code }) => {
             getTokenProps={getTokenProps}
             typingDelay={idx === 0 ? 2000 : 500}
             onDone={() => {
-              setStep((step) => step + 1);
+              setShownCommands((shownCommands) =>
+                commands.slice(0, shownCommands.length)
+              );
             }}
           />
         ))}
       </code>
     </pre>
   );
-};
+});
 
 Shell.propTypes = {
   animate: PropTypes.bool,

src/components/Terminal/Terminal.js

@@ -1,17 +1,31 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import { Button, useClipboard } from '@newrelic/gatsby-theme-newrelic';
 import Highlight from 'prism-react-renderer';
 import Prism from 'prismjs';
 import Shell from './Shell';
+import { useIntersection } from 'react-use';
 
 const Terminal = ({ animate, children }) => {
+  const ref = useRef();
+  const shellRef = useRef();
   const code = children.trim();
   const [copied, copy] = useClipboard();
+  const intersection = useIntersection(ref, {
+    root: null,
+    rootMargin: '0px 0px -33% 0px',
+  });
+
+  useEffect(() => {
+    if (animate && intersection?.isIntersecting) {
+      shellRef.current.startAnimation();
+    }
+  }, [animate, intersection]);
 
   return (
     <div
+      ref={ref}
       css={css`
         --chrome-color: #252526;
         --border-radius: 0.25rem;
@@ -61,7 +75,12 @@ const Terminal = ({ animate, children }) => {
       </div>
       <Highlight Prism={Prism} code={code} language="shell">
         {(highlight) => (
-          <Shell animate={animate} code={code} highlight={highlight} />
+          <Shell
+            ref={shellRef}
+            animate={animate}
+            code={code}
+            highlight={highlight}
+          />
         )}
       </Highlight>
     </div>