diff --git a/package.json b/package.json
index 720e2b4..e417f58 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
"react-helmet": "^5.2.0",
"react-markdown": "^3.6.0",
"react-pose": "^3.3.0",
- "react-transition-group": "^2.4.0",
"vcf": "^2.0.1"
},
"devDependencies": {
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index c15f0b1..34f2232 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -1,12 +1,13 @@
import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import posed, { PoseGroup } from 'react-pose'
+import { fadeIn } from './atoms/Transitions'
import Head from './molecules/Head'
import Header from './organisms/Header'
import Footer from './organisms/Footer'
import styles from './Layout.module.scss'
-const timeout = 150
+const timeout = 250
export default class Layout extends PureComponent {
static propTypes = {
@@ -18,24 +19,18 @@ export default class Layout extends PureComponent {
const { children, location } = this.props
const isHomepage = location.pathname === '/'
- const RoutesContainer = posed.div({
- enter: {
- opacity: 1,
- delay: timeout,
- delayChildren: timeout
- },
- exit: {
- opacity: 0
- },
- initialPose: 'exit'
- })
+ const RoutesContainer = posed.div(fadeIn)
return (
-
-
+
+
{children}
diff --git a/src/components/atoms/Animations.jsx b/src/components/atoms/Animations.jsx
deleted file mode 100644
index b36aadf..0000000
--- a/src/components/atoms/Animations.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import CSSTransition from 'react-transition-group/CSSTransition'
-import './Animations.scss'
-
-const Animation = props =>
-
-export const FadeIn = props => (
-
-)
-
-export const MoveIn = props => (
-
-)
diff --git a/src/components/atoms/Animations.scss b/src/components/atoms/Animations.scss
deleted file mode 100644
index 0a3f818..0000000
--- a/src/components/atoms/Animations.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.fadein-appear,
-.fadein-enter {
- opacity: .01;
-
- &.fadein-appear-active,
- &.fadein-enter-active {
- opacity: 1;
- transition: 200ms ease-in;
- }
-}
-
-.fadein-exit {
- opacity: 1;
- transition: 200ms ease-in;
-
- &.fadein-exit-active {
- opacity: .01;
- }
-}
-
-.movein-appear,
-.movein-enter {
- opacity: .01;
- transform: translate3d(0, 3rem, 0);
-
- &.movein-appear-active,
- &.movein-enter-active {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- transition: 300ms ease-out;
- }
-}
-
-.movein-exit {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- transition: 100ms ease-out;
-
- &.movein-exit-active {
- opacity: .01;
- transform: translate3d(0, 3rem, 0);
- }
-}
diff --git a/src/components/atoms/LogoUnit.jsx b/src/components/atoms/LogoUnit.jsx
index 4e90306..a84f90b 100644
--- a/src/components/atoms/LogoUnit.jsx
+++ b/src/components/atoms/LogoUnit.jsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import posed, { PoseGroup } from 'react-pose'
+import { moveInBottom } from '../atoms/Transitions'
import Logo from '../svg/Logo'
import styles from './LogoUnit.module.scss'
@@ -15,18 +16,7 @@ const query = graphql`
}
`
-const Animation = posed.div({
- enter: {
- opacity: 1,
- y: 0,
- transition: { type: 'spring' }
- },
- exit: {
- opacity: 0,
- y: '2rem',
- transition: { type: 'spring' }
- }
-})
+const Animation = posed.div(moveInBottom)
class LogoUnit extends PureComponent {
state = { minimal: false }
diff --git a/src/components/atoms/Transitions.js b/src/components/atoms/Transitions.js
new file mode 100644
index 0000000..c2b4c86
--- /dev/null
+++ b/src/components/atoms/Transitions.js
@@ -0,0 +1,30 @@
+export const fadeIn = {
+ enter: {
+ opacity: 1
+ },
+ exit: {
+ opacity: 0
+ }
+}
+
+export const moveInTop = {
+ enter: {
+ y: 0,
+ transition: { type: 'spring' }
+ },
+ exit: {
+ y: '-2rem',
+ transition: { type: 'spring' }
+ }
+}
+
+export const moveInBottom = {
+ enter: {
+ y: 0,
+ transition: { type: 'spring' }
+ },
+ exit: {
+ y: '2rem',
+ transition: { type: 'spring' }
+ }
+}
diff --git a/src/components/molecules/Availability.jsx b/src/components/molecules/Availability.jsx
index 5f73a16..e081b1c 100644
--- a/src/components/molecules/Availability.jsx
+++ b/src/components/molecules/Availability.jsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import posed, { PoseGroup } from 'react-pose'
-
+import { fadeIn } from '../atoms/Transitions'
import styles from './Availability.module.scss'
const query = graphql`
@@ -17,18 +17,7 @@ const query = graphql`
}
`
-const Animation = posed.aside({
- enter: {
- opacity: 1,
- y: 0,
- transition: { type: 'spring' }
- },
- exit: {
- opacity: 0,
- y: '2rem',
- transition: { type: 'spring' }
- }
-})
+const Animation = posed.aside(fadeIn)
export default class Availability extends PureComponent {
static propTypes = { hide: PropTypes.bool }
diff --git a/src/components/molecules/Networks.jsx b/src/components/molecules/Networks.jsx
index 9a823f4..e60e738 100644
--- a/src/components/molecules/Networks.jsx
+++ b/src/components/molecules/Networks.jsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import posed, { PoseGroup } from 'react-pose'
+import { moveInTop } from '../atoms/Transitions'
import Email from '../svg/Email'
import Blog from '../svg/Blog'
@@ -43,18 +44,7 @@ const NetworkIcon = props => {
}
}
-const Animation = posed.aside({
- enter: {
- opacity: 1,
- y: 0,
- transition: { type: 'spring' }
- },
- exit: {
- opacity: 0,
- y: '-2rem',
- transition: { type: 'spring' }
- }
-})
+const Animation = posed.aside(moveInTop)
export default class Network extends PureComponent {
static propTypes = {
diff --git a/src/components/molecules/ThemeSwitch.jsx b/src/components/molecules/ThemeSwitch.jsx
index 4aaae9c..79f723f 100644
--- a/src/components/molecules/ThemeSwitch.jsx
+++ b/src/components/molecules/ThemeSwitch.jsx
@@ -2,22 +2,13 @@ import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import posed, { PoseGroup } from 'react-pose'
+import { fadeIn } from '../atoms/Transitions'
+
import Day from '../svg/Day'
import Night from '../svg/Night'
import styles from './ThemeSwitch.module.scss'
-const Animation = posed.aside({
- enter: {
- opacity: 1,
- y: 0,
- transition: { type: 'spring' }
- },
- exit: {
- opacity: 0,
- y: '-2rem',
- transition: { type: 'spring' }
- }
-})
+const Animation = posed.aside(fadeIn)
const ThemeToggle = ({ dark }) => (