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.

  • Awesome discoveries! Hopefuly I can make this work for me too!

  • Works well…could you explain how PageSlider mixin works a bit more? Maybe the coffee hasn’t kicked in yet, having trouble following the logic :)

  • Pingback: Employee Directory Sample App with React and Node.js | Christophe Coenraets()

  • Aksel Gresvig

    Thanks for sharing, this is very interesting, but it would be of great value if you actually explained *how* you went about reactifying a “traditional” animation lib like PageSlider (directly manipulaitng the DOM).

    I’ve been wondering about best approaches to reactifying jQuery based animation-driven plugins.

  • amz3

    Here what I understood, the magic happens in PageSlider.componentDidUpdate, before that:

    – when the hash change, the router calls PageSlider.slidePage with the page that must be displayed

    – if it’s the first page, no animation happens, PageSlider render the container. done.

    – Otherwise “`animating = position !== “center”“`, “`position“` stores where the new page will come from. If the page is the first page that was displayed it will come from the left, otherwise it will come from the right. “`position“` is a css class string of the page.

    – PageSlider pages and animating states were updated, so a render is trigerred, which will render both the current page and the new one with correct css class string including position.

    – After the page is rendered, PageSlider.componentDidUpdate kicks in, it schedule two time animate one after the other via requestAnimationFrame (otherwise it doesn’t work, for some reason, maybe a race condition) which will at last set the “`page.props.position = “transition center” “`.

    – At this point it will reset animating = false, which is misleading since that’s when the animation starts.

    – Also in animate, a callback is set with “`pageEl.addEventListener(‘webkitTransitionEnd’, transitionEndHandler)“` which will remove the previous page from the html by updating PageSlider.state.pages *when* the animation is finished. So that at end of the animation the html only contains the current page.

  • holahej

    It looks nice but doesn’t work in Firefox 35.0

    • Michael

      Unfortunately holahej is right. First UX event is handled perfectly in FF35 but then everything after that yields no response.

  • Pingback: React.js Resources | Daniel W. Robert()

  • Works well! but Can you explain more deeply?

  • Max

    I would also love some more information! Just some basic steps for what resources to include, and basic ways to use them.

  • Pingback: 萌の宇 – React生命周期、API和深入用法()

  • kalite,fiyat uygunlugu ve imalattan.rofesyonek ekip eşliğinden güvenilir işler yapılmaktadır

  • This is how all VF should look!

  • very nice to blog admins

  • 2016 yılına girmemize bir hafta kaldı yeni yılın ilk şansını biz taksim resim kursu ile yaşamaya ne dersiniz ?
    2016 yılına girmeden yapacağınız kayıtlarda %40 indirim fırsatı sizleri bekliyor. Sizde sanat eserlerin doğuşuna eşlik eden taksim, istiklal caddesindeki şubemiz ile eğitimlerinizi alarak kişisel gelişiminizi tamamlayabilirsiniz.
    Güzel sanatlara hazırlık ta en doğru adres için bizi seçiniz.

  • 2016 ya günler kala hala internet ve paket sıkıntısı yaşıyorsanız vodafone net ile ayrıcalıkları yakalamaya ne dersiniz. Sizleri kaliteli bir internet ile buluşturmak için dünya markası olan vodafone Türkiye’de telsim operatörünün güncellenmesi ile pazara girdi. Sizleri yaklaşık 20 yıldır kampanyaları ile memnun eden şebeke ağımız şimdi çok daha kaliteli alt yapısı ile sizlerleyiz..
    Vodafone fiber internet için hemen başvurunuzu web sitemiz üzerinden yapabilirsiniz.

    http://yellowmileadsl.com/

  • Yetenekleriniz doğrultusunda sizleri ilgi duyduğunuz alanlara yönlendirmeye çalışarak kişisel gelişinizi bir yönde etkili bir şekilde kullanmanıza vesile olmak istiyoruz. Kuru boya, sulu boya, moda tasarım, duvar ressamı, karakalem ve daha bir çok çalışma alanında ilginizi ölçerek sizi bir alana yönlendirmeye çalışarak o alanda ilerleyerek çizeceğiniz yolda ilerlemenizi sağlayacağız.

    Taksim resim kursu ile sizlere eğitim vererek çalışmalarınızı ilginizi daha motive bir şekilde ilerlemesini sağlayacağız.
    Güzel sanatlara hazırlık konusunda uzman eğitmenlerce sizleri üniversitelere hazırlamaktayız.

css.php