feat(animation): add framer motion to layer-selector

package.json

@@ -37,6 +37,7 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/redux-logger": "^3.0.7",
     "cesium": "^1.66.0",
+    "framer-motion": "^1.8.4",
     "lodash.debounce": "^4.0.8",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

src/scripts/components/app/app.styl

@@ -1,11 +1,13 @@
 @require '../../../variables.styl'
 
 :global(html), :global(body), :global(#app)
+  overflow: hidden
   margin: 0
   height: 100%
 
 .app
   position: relative
+  overflow: hidden
   width: 100%
   height: 100%
   background-color: $black

src/scripts/components/app/app.tsx

@@ -8,7 +8,6 @@ import {HashRouter as Router} from 'react-router-dom';
 
 import rootReducer from '../../reducers/index';
 import {languageSelector} from '../../selectors/language';
-import {showLayerSelector} from '../../selectors/show-layer-selector';
 import UrlSync from '../url-sync/url-sync';
 import LayerLoader from '../layer-loader/layer-loader';
 import Init from '../init/init';
@@ -34,7 +33,6 @@ const App: FunctionComponent = () => (
 
 const TranslatedApp: FunctionComponent = () => {
   const language = useSelector(languageSelector);
-  const layerSelector = useSelector(showLayerSelector);
 
   return (
     <Router>
@@ -43,14 +41,9 @@ const TranslatedApp: FunctionComponent = () => {
           <div className={styles.logo}>
             <EsaLogo />
           </div>
-          {layerSelector ? (
-            <LayerSelector />
-          ) : (
-            <React.Fragment>
-              <Navigation />
-              <GlobeZoom />
-            </React.Fragment>
-          )}
+          <Navigation />
+          <GlobeZoom />
+          <LayerSelector />
         </div>
       </IntlProvider>
       <UrlSync />

src/scripts/components/layer-selector/layer-selector.styl

@@ -9,14 +9,17 @@
   position: absolute
   top: 0
   right: 0
-  display: flex
-  flex-direction: column
   min-width: emCalc(300px)
   max-width: emCalc(500px)
   width: 33%
   height: 100%
   background-color: $darkGrey2
 
+.content
+  display: flex
+  flex-direction: column
+  height: 100%
+
 .header
   display: flex
   justify-content: space-between

src/scripts/components/layer-selector/layer-selector.tsx

@@ -1,6 +1,8 @@
 import React, {FunctionComponent, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
+import {motion, AnimatePresence} from 'framer-motion';
+import {showLayerSelector} from '../../selectors/show-layer-selector';
 
 import Button from '../button/button';
 import {CloseIcon} from '../icons/close-icon';
@@ -14,6 +16,7 @@ import styles from './layer-selector.styl';
 const LayerSelector: FunctionComponent = () => {
   const dispatch = useDispatch();
   const layers = useSelector(layersSelector);
+  const layerSelector = useSelector(showLayerSelector);
   const [selectedMainId, setSelectedMainId] = useState<string | null>('clouds');
   const [selectedCompareId, setSelectedCompareId] = useState<string | null>();
   const selectedIds = [selectedMainId, selectedCompareId].filter(
@@ -25,37 +28,50 @@ const LayerSelector: FunctionComponent = () => {
   );
 
   return (
-    <div className={styles.layerSelector}>
-      <div className={styles.header}>
-        <h1 className={styles.title}>
-          <FormattedMessage id={'layers'} />
-        </h1>
-        <Button
-          className={styles.button}
-          icon={CloseIcon}
-          onClick={() => dispatch(showLayerSelectorAction(false))}
-        />
-      </div>
-      {selectedMainLayer && (
-        <SelectedLayerListItem
-          layer={selectedMainLayer}
-          onRemove={() => setSelectedMainId(null)}
-        />
-      )}
-      {selectedCompareLayer && (
-        <SelectedLayerListItem
-          showRemoveButton
-          layer={selectedCompareLayer}
-          onRemove={() => setSelectedCompareId(null)}
-        />
-      )}
-      <LayerList
-        layers={layers}
-        selectedIds={selectedIds}
-        onMainSelect={layerId => setSelectedMainId(layerId)}
-        onCompareSelect={layerId => setSelectedCompareId(layerId)}
-      />
-    </div>
+    <AnimatePresence>
+      {layerSelector ? (
+        <motion.div
+          className={styles.layerSelector}
+          initial={{x: '100%'}}
+          animate={{x: 0}}
+          transition={{type: 'spring', damping: 300, ease: 'easeOut'}}
+          exit={{x: '100%'}}>
+          <div className={styles.content}>
+            <div className={styles.header}>
+              <h1 className={styles.title}>
+                <FormattedMessage id={'layers'} />
+              </h1>
+              <Button
+                className={styles.button}
+                icon={CloseIcon}
+                onClick={() => {
+                  dispatch(showLayerSelectorAction(false));
+                }}
+              />
+            </div>
+            {selectedMainLayer && (
+              <SelectedLayerListItem
+                layer={selectedMainLayer}
+                onRemove={() => setSelectedMainId(null)}
+              />
+            )}
+            {selectedCompareLayer && (
+              <SelectedLayerListItem
+                showRemoveButton
+                layer={selectedCompareLayer}
+                onRemove={() => setSelectedCompareId(null)}
+              />
+            )}
+            <LayerList
+              layers={layers}
+              selectedIds={selectedIds}
+              onMainSelect={layerId => setSelectedMainId(layerId)}
+              onCompareSelect={layerId => setSelectedCompareId(layerId)}
+            />
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
   );
 };
 

src/scripts/components/navigation/navigation.styl

@@ -1,11 +1,20 @@
 @require '../../../variables.styl'
 
+@font-face
+  font-style: normal
+  font-family: NotesEsa
+  src: url('../../../fonts/NotesEsaReg.otf')
+
 .navigation
   position: absolute
   top: emCalc(22px)
   right: emCalc(22px)
   display: flex
 
 .button
-  &:not(:first-child)
+  font-size: emCalc(18px)
+  font-family: NotesEsa
+  line-height: emCalc(22px)
+
+  .button, &:not(:first-child)
     padding-left: emCalc(30px)