Using react-transition-group

sliding-container.js

import React from 'react'
import { bool, element, oneOf } from 'prop-types'
import { css } from 'glamor'
import { Transition } from 'react-transition-group'

import { wrapperStyle } from './styles'

const transInfo = '250ms cubic-bezier(0.07, 0.95, 0, 1)'
const baseSlideStyle = {
	transition: `opacity ${transInfo}, transform ${transInfo}`,
}
function getDirStyle(dir = 'left', state) {
	const isEnd = ['entering', 'exited'].includes(state)
	return css(baseSlideStyle, {
		flexShrink: Number(isEnd),
		opacity: Number(!isEnd),
		transform: `translateX(${isEnd ? (dir === 'left' ? -100 : 100) : 0}%)`,
	})
}

export function SlidingContainer({ children, dir = 'left', in: inProp }) {
	return (
		<Transition timeout={275} in={inProp}>
			{state => (
				<article {...css(wrapperStyle, getDirStyle(dir, state))}>
					{children}
				</article>
			)}
		</Transition>
	)
}

SlidingContainer.propTypes = {
	children: element,
	dir: oneOf(['left', 'right']),
	in: bool,
}

export default SlidingContainer

using-transition.js

function Component({ shownPane }) {
		return (
				<div {...containerStyle}>
					<SlidingContainer in={shownPane === 1}>
            <div>1</div>
					</SlidingContainer>
					<SlidingContainer dir="right" in={shownPane === 2}>
            <div>2</div>
					</SlidingContainer>
				</div>
		)
}