Velocity registerEffects w/ server-side React

animate.jsx

import React from 'react';
import { VelocityTransitionGroup, velocityHelpers } from 'velocity-react';

const Animation = {};

if (process.env.BROWSER) {
  require('velocity-animate/velocity.ui');

  Animation.In = velocityHelpers.registerEffect({
    calls: [
      [{
        opacity: 1,
        transformY: -100
      }, 1, {
        easing: 'ease-in',
        display: 'block'
      }]
    ]
  });

  Animation.Out = velocityHelpers.registerEffect({
    calls: [
      [{
        opacity: 0,
        transformY: 100
      }, 1, {
        easing: 'ease-out',
        display: 'block'
      }]
    ]
  });
}

function animateThing () {
  const enterAnimation = {
    animation: Animation.In || null,
    duration: 1000,
  };
  const leaveAnimation = {
    animation: Animation.Out || null,
    duration: 1000,
  };
  
  return (
    <VelocityTransitionGroup runOnMount={true} enter={ enterAnimation } leave={ leaveAnimation }>
      { props.stateChange ? <Component /> : null }
    </VelocityTransitionGroup>
  );
}

export default animateThing;