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 }) => (