reveal-animations

reveal-animations.ts

import { createGlobalStyle, keyframes } from 'styled-components';

import fadeIn from 'react-animations/lib/fade-in';
import slideInLeft from 'react-animations/lib/slide-in-left';
import slideInRight from 'react-animations/lib/slide-in-right';

export const reveals = {
  fadeInUp: 'fade-in-up',
  fadeIn: 'fade-in',
  slideInLeft: 'slide-in-left',
  slideInRight: 'slide-in-right'
};

function translate3d(a, b, c) {
  return 'translate3d(' + a + ', ' + b + ', ' + c + ')';
}

const fadeInUp = {
  from: {
    opacity: 0,
    transform: translate3d(0, '50px', 0)
  },
  to: {
    opacity: 1,
    transform: 'none'
  }
};

export const RevealGlobalStyles = createGlobalStyle`

  .${reveals.fadeInUp} {
    animation: ${keyframes`${fadeInUp}`} 500ms;
  } 
  
  .${reveals.fadeIn} {
    animation: ${keyframes`${fadeIn}`} 500ms;
  }
  
  .${reveals.slideInLeft} {
    animation: ${keyframes`${slideInLeft}`} 500ms;
  }
  
  .${reveals.slideInRight} {
    animation: ${keyframes`${slideInRight}`} 500ms;
  }
`;