animation tweaks

package.json

@@ -26,7 +26,8 @@
     "react": "^16.8.6",
     "react-blockies": "^1.4.1",
     "react-dom": "^16.8.6",
-    "react-pose": "^4.0.8"
+    "react-pose": "^4.0.8",
+    "react-pose-text": "^3.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",

src/App.css

@@ -100,8 +100,6 @@ a h1 {
     background: #fff;
     border-radius: 5px;
     border: .1rem solid #e2e2e2;
-
-    /* animation: fadein .5s .5s ease-out; */
 }
 
 .dark .box {

src/App.jsx

@@ -8,6 +8,7 @@ import Titlebar from './components/Titlebar'
 import Home from './screens/Home'
 import Preferences from './screens/Preferences'
 import './App.css'
+import { defaultAnimation } from './components/Animations'
 
 //
 // Disable zooming
@@ -15,30 +16,12 @@ import './App.css'
 webFrame.setVisualZoomLevelLimits(1, 1)
 webFrame.setLayoutZoomLevelLimits(0, 0)
 
-const Animation = posed.div({
-  enter: {
-    y: 0,
-    opacity: 1,
-    delay: 100,
-    transition: {
-      type: 'spring',
-      stiffness: 500,
-      damping: 25,
-      restDelta: 0.5,
-      restSpeed: 10
-    }
-  },
-  exit: {
-    y: 50,
-    opacity: 0,
-    transition: { duration: 150 }
-  }
-})
+const Animation = posed.div(defaultAnimation)
 
 const PosedRouter = ({ children }) => (
   <Location>
     {({ location }) => (
-      <PoseGroup>
+      <PoseGroup animateOnMount>
         <Animation key={location.key}>
           <Router location={location}>{children}</Router>
         </Animation>

src/components/Animations.js

@@ -0,0 +1,36 @@
+export const defaultAnimation = {
+  enter: {
+    y: 0,
+    opacity: 1,
+    delay: 100,
+    transition: { duration: 150 }
+  },
+  exit: {
+    y: 50,
+    opacity: 0,
+    transition: { duration: 150 }
+  }
+}
+
+export const fadeIn = {
+  enter: {
+    opacity: 1,
+    transition: { duration: 600 }
+  },
+  exit: {
+    opacity: 0,
+    transition: { duration: 100 }
+  }
+}
+
+export const characterAnimation = {
+  exit: { opacity: 0, y: 10 },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: ({ charInWordIndex }) => ({
+      type: 'spring',
+      delay: charInWordIndex * 20
+    })
+  }
+}

src/components/Balance.css

@@ -1,12 +1,10 @@
 .number {
     margin: 0;
-    transition: .15s ease-out;
     -webkit-app-region: no-drag;
     -webkit-user-select: text;
     font-size: 1rem;
     display: inline-block;
     padding: 0 .3rem;
-    animation: fadeIn .5s ease-out;
     border-radius: 4px;
 }
 
@@ -23,13 +21,3 @@
         background: rgba(255, 255, 255, 0);
     }
 }
-
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}

src/components/Balance.jsx

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import { AppContext } from '../store/createContext'
 import { locale } from '../util/moneyFormatter'
 import { formatCurrency } from '@coingecko/cryptoformat'
+import SplitText from 'react-pose-text'
 import './Balance.css'
+import { characterAnimation } from './Animations'
 
 export default class Balance extends PureComponent {
   static contextType = AppContext
@@ -18,10 +20,16 @@ export default class Balance extends PureComponent {
 
     return (
       <h1 className="number">
-        {formatCurrency(balance[currency], currency.toUpperCase(), locale)
-          .replace(/BTC/, 'Ƀ')
-          .replace(/ETH/, 'Ξ')
-          .replace(/OCEAN/, 'Ọ')}
+        <SplitText
+          initialPose="exit"
+          pose="enter"
+          charPoses={characterAnimation}
+        >
+          {formatCurrency(balance[currency], currency.toUpperCase(), locale)
+            .replace(/BTC/, 'Ƀ')
+            .replace(/ETH/, 'Ξ')
+            .replace(/OCEAN/, 'Ọ')}
+        </SplitText>
       </h1>
     )
   }

src/components/Ticker.css

@@ -2,7 +2,6 @@
     justify-content: center;
     margin-top: 2rem;
     margin-bottom: 2rem;
-    transition: opacity 1s ease-out;
 }
 
 .ticker .number-unit {

src/components/Ticker.jsx

@@ -2,7 +2,11 @@ import React, { PureComponent } from 'react'
 import { AppContext } from '../store/createContext'
 import { locale } from '../util/moneyFormatter'
 import { formatCurrency } from '@coingecko/cryptoformat'
+import posed, { PoseGroup } from 'react-pose'
 import './Ticker.css'
+import { fadeIn } from './Animations'
+
+const Item = posed.div(fadeIn)
 
 export default class Ticker extends PureComponent {
   static contextType = AppContext
@@ -12,22 +16,24 @@ export default class Ticker extends PureComponent {
 
     return (
       <footer className="number-unit-wrap ticker" {...this.props}>
-        {Object.keys(prices).map((key, i) => (
-          <div key={i} className="number-unit">
-            <button
-              className={`label label--price ${key === currency &&
-                !needsConfig &&
-                'active'}`}
-              onClick={() => toggleCurrencies(key)}
-              disabled={needsConfig}
-            >
-              {formatCurrency(prices[key], key.toUpperCase(), locale)
-                .replace(/BTC/, 'Ƀ')
-                .replace(/ETH/, 'Ξ')
-                .replace(/OCEAN/, 'Ọ')}
-            </button>
-          </div>
-        ))}
+        <PoseGroup animateOnMount>
+          {Object.keys(prices).map((key, i) => (
+            <Item key={i} className="number-unit">
+              <button
+                className={`label label--price ${key === currency &&
+                  !needsConfig &&
+                  'active'}`}
+                onClick={() => toggleCurrencies(key)}
+                disabled={needsConfig}
+              >
+                {formatCurrency(prices[key], key.toUpperCase(), locale)
+                  .replace(/BTC/, 'Ƀ')
+                  .replace(/ETH/, 'Ξ')
+                  .replace(/OCEAN/, 'Ọ')}
+              </button>
+            </Item>
+          ))}
+        </PoseGroup>
       </footer>
     )
   }

src/screens/Home.css

@@ -5,7 +5,6 @@
     align-items: center;
     flex-wrap: wrap;
     position: relative;
-    animation: fadein .5s .5s ease-out;
 }
 
 .preferences-link {
@@ -79,13 +78,3 @@
 .number-unit--main .number {
     font-size: 2.5rem;
 }
-
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}

src/screens/Preferences.jsx

@@ -3,8 +3,12 @@ import { Link } from '@reach/router'
 import Store from 'electron-store'
 import Blockies from 'react-blockies'
 import ethereum_address from 'ethereum-address'
+import posed, { PoseGroup } from 'react-pose'
 import { AppContext } from '../store/createContext'
 import './Preferences.css'
+import { fadeIn } from '../components/Animations'
+
+const Item = posed.li(fadeIn)
 
 export default class Preferences extends PureComponent {
   static contextType = AppContext
@@ -81,23 +85,25 @@ export default class Preferences extends PureComponent {
             Add Ethereum account addresses holding Ocean Tokens.
           </p>
           <ul className="preference__list">
-            {accounts &&
-              accounts.map(account => (
-                <li key={account}>
-                  <div>
-                    <Blockies seed={account} size={10} scale={3} />
-                    {account}
-                  </div>
+            <PoseGroup>
+              {accounts &&
+                accounts.map(account => (
+                  <Item key={account}>
+                    <div>
+                      <Blockies seed={account} size={10} scale={3} />
+                      {account}
+                    </div>
 
-                  <button
-                    className="delete"
-                    onClick={e => this.handleDelete(e, account)}
-                    title="Remove account"
-                  >
-                    &times;
-                  </button>
-                </li>
-              ))}
+                    <button
+                      className="delete"
+                      onClick={e => this.handleDelete(e, account)}
+                      title="Remove account"
+                    >
+                      &times;
+                    </button>
+                  </Item>
+                ))}
+            </PoseGroup>
             <li>
               <input
                 type="text"