Author avatar

Vivek Kumar

Adding ReactJS Animation Library and Animate.css to Animate

Vivek Kumar

  • Sep 16, 2019
  • 9 Min read
  • 11 Views
  • Sep 16, 2019
  • 9 Min read
  • 11 Views
Web Development
React

Introduction

The ReactJS framework remains one of the most acclaimed platforms to render transitions for a number of reasons. The combination of React with CSS style language is considered to be one of the more complex groups of components, yet it is the simplest in terms of execution. The features associated with the ReactJS animation library and animate.css are reliable and can be put to use in an effective manner. But first and foremost, it is crucial that you incorporate the style library and .css files in a correct manner, and from the right source, to eliminate mistakes at the time of rendering the end transition product.

The components that can be added to the ReactJS animation library and animate.css are vast but the approach with which they are incorporated is not a tough nut to crack. The best thing about learning the approach is that once you become proficient enough to fetch the React animation library components in CSS, then you have the skills to accomplish several key steps related to transition. This is one of the pivotal steps in transforming yourself from an amateur to a professional!

In this guide, our goal is to help you with the simplest, yet the most trustworthy, approach for adding the ReactJS animation library and animate.css to get the most stable and compact animation. This guide will be comprised of a number of comprehensive commands (along with their explanations) required to cover the objective.

A To-Do List Demo

Let us start with a practical example, in order to understand and interpret things in a better way. We will look at a practice to-do list command where we would like to include animate.css library animations with the ability to add as well as remove element feature per your convenience.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/** @jsx React.DOM */
var TodoList = React.createClass({
  propTypes: {items: React.PropTypes.array},
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
React.renderComponent(<TodoApp />, document.body);
jsx

The Application of ReactTransitionGroup

The application of ReactTransitionGroup is an effective method for adding the ReactJS animation library and applies the callbacks to set up animate.css in child nodes. It is essential to understand that you cannot directly implement ReactTransitionGroup due to the class name convention that it carries. You are required to control animation class names to align with React conventions. You can see this directly from the fact that ReactTransitionGroup applies .transitionName-enter-active to mount the node for animation, whereas your requirement is going to be like .animate zoomIn.

On the same grounds, we are going to create a prototype of classnames in ReactTransitionGroup. Just have a look at the same down below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  propTypes: {
    transitionName: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        leave: React.PropTypes.string
      }),
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        enterActive: React.PropTypes.string,
        leave: React.PropTypes.string,
        leaveActive: React.PropTypes.string
      })
    ]).isRequired,
    transitionAppear: React.PropTypes.bool,
    transitionEnter: React.PropTypes.bool,
    transitionLeave: React.PropTypes.bool
  },
jsx

Make a note that in order to make rendering easier in React with essential support to animate.css, it is strongly recommended to use the latest version of React. To render the function with the add and remove features, just have a glance at the steps down below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var TodoList = React.createClass({
  getInitialState: function() {
      var todos = [  {text: "Init Todo1"}  ,  {text: "Init Todo2"}   ];
      return {todos: todos}; 
  },

  add: function() {
      var todos = this.state.todos;
      todos.push({text: "New!"});
      this.setState({todos: todos});
  },
  remove: function() {
      var todos = this.state.todos;
      todos.pop();
      this.setState({todos: todos});
  },

  render: function() {
    var todos = this.state.todos.map(function(todo, index) {
      return <Todo key={index} todo={todo}/>
    });
    return (
        <div>
            <div onClick={this.add}>Add</div>
            <div onClick={this.remove}>Remove</div>
            <br/>
            <div>
                <ReactCSSTransitionGroup transitionName={{enter: "animated bounce", enterActive: "animated bounce", leave: "animated tada",leaveActive: "animated tada"}}>
                    {todos}
                </ReactCSSTransitionGroup>
            </div>
        </div>
    );
  }
});

var Todo = React.createClass({
  render: function() {
    return <div>{this.props.todo.text}</div>;
  }
});
jsx

The approach may seem like a long one but it is the best one in terms of stability of the framework without compromising your animation needs. You are required to download animate.css available from the source and simply write down styles.css by importing them from animate.css, as indicated down below:

1
2
3
4
5
6
7
8
9
@import "lib/animate.css";

.headerForm-enter {
    animation: 0.8s flipInX ease;
}

.headerForm-leave {
    animation: 0.5s flipOutX ease;
}
jsx

The code for getting the animations done successfully in ReactCSSTransitionGroup is provided down below:

1
2
3
4
5
6
<ReactCSSTransitionGroup
    transitionName='headerForm'
    transitionEnterTimeout={800}
    transitionLeaveTimeout={500}>
    {content}
</ReactCSSTransitionGroup>
jsx

Using Animated Class on Child Components

As you have now explored the vitality of the ReactTransitionGroup in the successful addition of the ReactJS animation library and animate.css, it will be best to finish this guide with some valuable input. It is highly recommended that you keep transitionEnterTimeout at a fixed state of 1000. It is noteworthy that it is exactly the time taken to run the animation on the animate.css. Yes, you can switch the numbers as per your convenience and needs. It is not going to make much of a difference until it serves the purpose. Here's the desired solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
events = this.props.schedule.map(function(event) {
    return (
        <li className="animated" key={event.time}>
           <ScheduleEventItem event={event} />
        </li>
    );
});


return (
                <React.addons.CSSTransitionGroup className="animated" 
                    transitionName={{enter: "flipInX", leave: "flipOutX"}}
                    transitionEnterTimeout={1000} transitionLeaveTimeout={1}
                    >
                        {events}
                </React.addons.CSSTransitionGroup>
);
jsx

Conclusion

The approach for adding the ReactJS animation library and animate.css to your transition requires practice. It is a fact that how meticulous you are in terms of your approach, eventually decides whether you will succeed in choosing the right library components or not. Obviously, the final product says it all and we have ensured that, once you go through this guide, you can counter all the challenges with skill and confidence.

We commenced with a simple to-do list and tried to comprehend how widespread the impact of ReactTransitionGroup could be through various examples. We also recommended briefly putting the animated class in child components and explored how putting the transition timeout at a fixed state can actually bring out the real difference.

Reference

You can refer the following resource which is also used as a reference for this guide:

0