Chapter 10. Animation

In the previous chapter, we took a look at react-router and performed routing at different levels. We also looked at nested routing, passing around parameters, and how react-router maintains history when performing the routing tasks. We learned about passing around context and using context to render React components. We explored data models and mixed and matched them with other frameworks to use as data models in React-like Backbone, and were introduced to Flux.

In this chapter, we are going to explore a fun React add-on, Animation. We will start off by continuing with our Cat Pinterest application and enhancing it to support starring and sharing the data to update the views. We will then explore adding handlers for animation. We will see how components get wrapped for animation and how React adds the handlers for different events. We will also explore different events and how we can easily enhance our application in order to create stunning effects.

In this chapter...

Fun stuff at Adequate LLC!

"Hi Shawn and Mike!" Carla joined Mike and Shawn in their conversation.

The day before, Carla had asked them to build a Pinterest-style application for cats for one of their clients.

"How are things going today?" she enquired.

"All good, Carla. Shawn, do you want to show Carla what we built yesterday?"

"Sure."

"That looks nice! Are we adding button for faving/starring of cats next?"

"Yes, we were just getting ready for that."

"Cool. The client called yesterday. What they want along with displaying the cats is to show a stream of cats being updated on the screen. This is going to happen when someone faves a cat so that we show it to other users."

"Got it. We will start working on it and simulate addition of cats to appear on the screen to start with."

"Awesome, I will leave you both to it."

Model updates

"So Shawn, instead of using the Backbone collection in an isolated fashion, let's move it to a class to manage adding of new cats randomly and provide it with some other utilities, as follows:"

const PictureModel = Backbone.Model.extend({
  defaults: {
    src: 'http://lorempixel.com/601/600/cats/',
    name: 'Pusheen',
    details: 'Pusheen is a Cat',
    faved: false
  }
});

"Our PictureModel stays the same. We are adding a new faved attribute here to maintain state about whether the cat was faved by the user or not.

"We will call this new class of ours CatGenerator, which will provide the component that we use to display the cats, with the data to display, fetch, and add new cats."

"Got it. Want me to give it a try?"

"Sure."

import Backbone from 'backbone';
import Faker from 'faker';
import _ from 'underscore';
…

class CatGenerator {
  constructor() {
    this.Cats = new Backbone.Collection;
    [600, 601, 602, 603, 604, 605].map( (height)=>{
      this.createCat(height, 600...

Animate

"React allows us to animate objects easily with its react-addons-css-transition-group add-on."

"This gives us a handle to the ReactCSSTransitionGroup object, which is what we will be using to animate changes in data, such as addition of cats, faving/unfaving, and so on."

"Let's start by animating the addition of new cats to the stream, shall we?"

render() {
    let Cats = this.state.catGenerator.Cats;

    return (
        <div>
          <div>
            <ReactCSSTransitionGroup transitionName="cats" 
                                     transitionEnterTimeout={500} 
                                     transitionLeaveTimeout={300}
                                     transitionAppear={true} 
                                     transitionAppearTimeout={500}>
              {Cats.map(cat => (
                  <div key={cat.cid} style={{float: 'left'}}>
                    <Link to={`/pictures/${cat.cid}`}
                          state={{ modal: true...

Summary

In this chapter, we worked around changing the data flow and passing data directly from react-router links. We took a look at animating a collection of objects being added/removed or as they appear. We saw different transition events supported by ReactCSSTransitionGroup and how to use relevant classes to animate our objects.

In the next chapter, we will learn how to test our app using Jest and React TestUtils.