Hide animations on prefers-reduced-motion (codesandbox#2802)

* global reduce motion

* add hooks

* refactor hooks and hide animation

* refactor hooks and hide animation

* hide animation

* disable button animation

* keep vertical steps

* use interval

* check server render

Author: yeion7

packages/homepage/src/css/global.css

@@ -50,3 +50,13 @@ twitter-widget {
   margin-left: auto;
   margin-right: auto;
 }
+
+@media screen and
+  (prefers-reduced-motion: reduce), 
+  (update: slow) {
+  * {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}

packages/homepage/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { useMatchMedia } from './useMatchMedia';
+export { useInterval } from './useInterval';

packages/homepage/src/hooks/useInterval.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export function useInterval(callback, delay) {
+  const savedCallback = React.useRef();
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // eslint-disable-next-line consistent-return
+  React.useEffect(() => {
+    function tick() {
+      if (savedCallback && savedCallback.current) {
+        savedCallback.current();
+      }
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}

packages/homepage/src/hooks/useMatchMedia.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const isServerRender = typeof window === `undefined`;
+
+export function useMatchMedia(query, defaultMatch = false) {
+  const mediaQueryList = !isServerRender && window.matchMedia(query);
+  const [match, setMatch] = React.useState(
+    isServerRender ? defaultMatch : mediaQueryList.matches
+  );
+
+  React.useEffect(() => {
+    const handleMatchChange = ev => setMatch(ev.matches);
+
+    mediaQueryList.addListener(handleMatchChange);
+
+    return () => {
+      mediaQueryList.removeListener(handleMatchChange);
+    };
+  }, [mediaQueryList, query]);
+
+  return match;
+}

packages/homepage/src/screens/home/Animation/index.js

@@ -22,7 +22,7 @@ import Cubes from './Cubes';
 import Frameworks from '../Frameworks';
 
 import getScrollPos from '../../../utils/scroll';
-
+import { useMatchMedia, useInterval } from '../../../hooks';
 import media from '../../../utils/media';
 
 const Container = styled(Centered)`
@@ -66,77 +66,65 @@ const Message = styled.h2`
 
 const TEMPLATES = [parcel, react, vue, angular, gatsby, nuxt, next];
 
-export default class Animation extends React.PureComponent {
-  state = {
-    templates: TEMPLATES.filter(tem => tem.showOnHomePage && tem.showCube),
-    templateIndex: 0,
-    templateSelected: false,
-    canvas: null,
-  };
-
-  componentDidMount() {
-    this.startTimer();
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
-
-  startTimer = () => {
-    this.timeout = setTimeout(() => {
-      if (!this.state.templateSelected) {
-        if (!window.scrolling && getScrollPos().y < window.innerHeight) {
-          this.setState(state => ({
-            templateIndex: (state.templateIndex + 1) % state.templates.length,
-          }));
-        }
-
-        this.startTimer();
+const Animation = () => {
+  const templates = TEMPLATES.filter(tem => tem.showOnHomePage && tem.showCube);
+  const reduceAnimation = useMatchMedia('(prefers-reduced-motion: reduce)');
+  const [templateIndex, setTemplateIndex] = React.useState(0);
+  const [templateSelected, setTemplateSelected] = React.useState(false);
+  const canvas = React.useRef();
+
+  const changeTemplate = React.useCallback(() => {
+    if (!templateSelected) {
+      // @ts-ignore
+      if (!window.scrolling && getScrollPos().y < window.innerHeight) {
+        setTemplateIndex(index => (index + 1) % templates.length);
       }
-    }, 6000);
-  };
+    }
+  }, [templateSelected, templates.length]);
 
-  setCanvas = canvas => {
-    this.setState({ canvas });
+  const setCanvas = canvasToSet => {
+    canvas.current = canvasToSet;
   };
 
-  selectTemplate = template => {
-    this.setState(state => ({
-      templateIndex: state.templates.indexOf(template),
-      templateSelected: true,
-    }));
+  const selectTemplate = template => {
+    setTemplateIndex(templates.indexOf(template));
+    setTemplateSelected(true);
   };
 
-  render() {
-    const template = this.state.templates[this.state.templateIndex];
-    return (
-      <Relative>
-        <Fullscreen>
-          <Background
-            templateIndex={this.state.templateIndex}
-            template={template}
-            setCanvas={this.setCanvas}
-          />
-          <Container horizontal>
-            <HomeTitle template={template} />
+  useInterval(changeTemplate, 6000);
+  const template = templates[templateIndex];
+
+  return (
+    <Relative>
+      <Fullscreen>
+        <Background
+          templateIndex={templateIndex}
+          template={template}
+          setCanvas={setCanvas}
+        />
+        <Container horizontal>
+          <HomeTitle template={template} />
+          {!reduceAnimation && (
             <Media query="(min-width: 1280px)">
               <Cubes
-                canvas={this.state.canvas}
-                templates={this.state.templates}
+                canvas={canvas.current}
+                templates={templates}
                 template={template}
-                setTemplate={this.selectTemplate}
+                setTemplate={selectTemplate}
               />
             </Media>
-          </Container>
-        </Fullscreen>
-        <Centered horizontal>
-          <Message>
-            CodeSandbox is an online editor that helps you create web
-            applications, from prototype to deployment.
-          </Message>
-        </Centered>
-        <Frameworks templates={TEMPLATES.filter(tem => tem.showOnHomePage)} />
-      </Relative>
-    );
-  }
-}
+          )}
+        </Container>
+      </Fullscreen>
+      <Centered horizontal>
+        <Message>
+          CodeSandbox is an online editor that helps you create web
+          applications, from prototype to deployment.
+        </Message>
+      </Centered>
+      <Frameworks templates={TEMPLATES.filter(tem => tem.showOnHomePage)} />
+    </Relative>
+  );
+};
+
+export default React.memo(Animation);