Animated Page Transitions with React.js

After exploring React in my previous post, I started experimenting with ways to implement animated page transitions in mobile web and Cordova-based apps.

ReactCSSTransitionGroup provides the basic infrastructure for CSS-based animations. But after a few promising experiments, I ran into this problem. I also wasn’t sure this approach would give me enough control to implement the page transition choreography expected in mobile apps (like tie animation direction to browser history).

I thought about using PageSlider, a micro library I shared two years ago, and that provides a simple API to implement hardware-accelerated page transitions. But that library is heavy on direct DOM manipulation, which doesn’t fit well in React’s world.

So, I spent some time reimplementing PageSlider using React’s virtual DOM. You can experience the result here, or by clicking the image below.

react

This was mostly an experiment with the goal of identifying a minimal infrastructure to implement page transitions using React and avoid any direct DOM manipulation. There are other ways to do it and I’m definitely looking forward to your feedback if you are using a different approach.

Source Code

The pageslider-react source code is available in this GitHub repository.

css.php