diff --git a/package.json b/package.json
index 6285959c..145b75ad 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,14 @@
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
+    "react-collapse": "^2.3.3",
     "react-color": "^2.10.0",
     "react-dom": "^15.4.0",
     "react-file-reader-input": "^1.1.0",
+    "react-height": "^2.1.1",
     "react-icon-base": "^2.0.4",
     "react-icons": "^2.2.1",
+    "react-motion": "^0.4.7",
     "react-sortable-hoc": "^0.4.5",
     "request": "^2.79.0"
   },
diff --git a/src/components/layers/LayerEditorGroup.jsx b/src/components/layers/LayerEditorGroup.jsx
index 0a65ee45..09fc7ce9 100644
--- a/src/components/layers/LayerEditorGroup.jsx
+++ b/src/components/layers/LayerEditorGroup.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import colors from '../../config/colors'
 import { margins, fontSizes } from '../../config/scales'
 
+import Collapse from 'react-collapse'
 import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down'
 import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
 
@@ -45,12 +46,13 @@ export default class LayerEditorGroup extends React.Component {
         <Collapser isCollapsed={this.props.isActive} />
       </div>
       <div style={{
-        display: this.props.isActive ? null : 'none',
         border: 2,
         borderStyle: 'solid',
         borderColor: colors.gray,
       }}>
-        {this.props.children}
+        <Collapse isOpened={this.props.isActive}>
+          {this.props.children}
+        </Collapse>
       </div>
     </div>
   }