Added 'prefers-reduced-motion' css support.

src/components/layers/CollapseReducedMotion.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Collapse from 'react-collapse'
+import lodash from 'lodash'
+
+
+// Wait 3 seconds so when a use enables it they don't have to refresh the page.
+const isReduceMotionEnabled = lodash.throttle(() => {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}, 3000);
+
+export default class CollapseReducedMotion extends React.Component {
+  static propTypes = {
+    isActive: PropTypes.bool.isRequired,
+    children: PropTypes.element.isRequired
+  }
+
+  render() {
+    if (isReduceMotionEnabled()) {
+      return (
+        <div style={{display: this.props.isActive ? "block" : "none"}}>
+          {this.props.children}
+        </div>
+      )
+    }
+    else {
+      return (
+        <Collapse isOpened={this.props.isActive}>
+          {this.props.children}
+        </Collapse>
+      )
+    }
+  }
+}
+

src/components/layers/LayerEditorGroup.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapse from 'react-collapse'
 import Collapser from './Collapser'
+import CollapseReducedMotion from './CollapseReducedMotion'
+
 
 export default class LayerEditorGroup extends React.Component {
   static propTypes = {
@@ -22,11 +23,11 @@ export default class LayerEditorGroup extends React.Component {
         <span style={{flexGrow: 1}} />
         <Collapser isCollapsed={this.props.isActive} />
       </div>
-      <Collapse isOpened={this.props.isActive}>
+      <CollapseReducedMotion isActive={this.props.isActive}>
         <div className="react-collapse-container">
           {this.props.children}
         </div>
-      </Collapse>
+      </CollapseReducedMotion>
     </div>
   }
 }

src/styles/_input.scss

@@ -126,6 +126,10 @@
     border-width: 2px;
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
   }
 
   &-icon {

src/styles/_layer.scss

@@ -43,6 +43,10 @@
     -webkit-transition: opacity 600ms, visibility 600ms;
     transition: opacity 600ms, visibility 600ms;
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0;
+    }
+
     @include flex-row;
   }