Animated page transitions with React Router 4, ReactTransitionGroup and Animated
Martin Haagensli
2.1K33

First off, thank you. I have been searching for quite some time on how to create a smooth, clean animation in React.

I created a curried version of AnimatedWrapper and would love to hear your thoughts on it. Currying AnimatedWrapper allows me to pass in different style properties to be used for animation.

const AnimatedWrapper = styles =>
WrappedComponent =>
class AnimatedWrapper
extends Component {
constructor(props) {
super(props);
this.state = {
animate: new Animated.Value(0)
};
}
componentWillMount(cb) {
setTimeout(
() =>
Animated.spring(this.state.animate, { toValue: 1 }).start(),
250
);
}
componenDidMount(cb) {
setTimeout(
() => Animated.spring(this.state.animate, { toValue: 1 }).start(),
550
);
}
componentWillUnmount(cb) {
Animated.spring(this.state.animate, { toValue: 0 }).start();
}
render() {
const style = styles(this.state);
return (
<Animated.div style={style} className="animated-page-wrapper">
<WrappedComponent {...this.props} />
</Animated.div>
);
}
};

I can then create a separate style function to be passed in.

const FadeInRight = (state) => ({
opacity: Animated.template`${state.animate}`,
transform: Animated.template`
translate3d(
${state.animate
.interpolate({
inputRange: [0, 1],
outputRange: ["18px", "0px"]
})
},0,0)
`
});

Finally, in practice with a SomeComponent

import { AnimatedWrapper, FadeInRight } from './some-path/AnimatedWrapper';
const LeftCol = () => 
<div>I'm an animated left column. I'll Fade in to the right</div>
export default AnimatedWrapper(FadeInRight)(LeftCol);

I am curious if this is an efficient way to extend AnimatedWrapper for use with different animations. Any feedback would be lovely.

Many thanks.