Author avatar

Vivek Kumar

Animating a ReactJS Component Using React-reveal

Vivek Kumar

  • Jun 11, 2019
  • 7 Min read
  • 382 Views
  • Jun 11, 2019
  • 7 Min read
  • 382 Views
Web Development
React

Introduction

There have been a number of budding animation developers who have frequently asked how effective React-reveal actually is? What is the depth of animation that can be achieved with the help of this animation framework? And above all, will this framework be actually conducive enough when the things eventually shift to advanced animation? So, here, in this guide, we will try to shed some light on a specific type of animation framework which is specially designed to work for React components.

About React Reveal

React Reveal framework designed by the professionals in React JS community to incorporate the widest possible library of basic, intermediate, and advanced animations. The best thing about the components in this library is that, from fade, zoom, flip, and rotate to the transitions for additional time duration like scroll, can be availed through this framework.

When you are animating a ReactJS component on Render with React Reveal then the programming framework will enable you to have the control of all types of animations along with props. For instance, the position, distance, delay, cascade, etc. can be controlled in an effective manner. If, as a developer, you prefer custom CSS effects then it can also be achieved via this framework. Apart from that, the framework also features server-end rendering along with high order components.

As mentioned above, React Reveal will enable you to construct scroll animation in a dependable way. Let us have a glance upon how it actually functions:

1
2
3
4
import Fade from 'react-reveal/Fade';
<Fade top >
	<h1 > Title </ h1>
</ Fade>
javascript

If you are implementing them in the form of animation for the generation of the scroll effects then it would look like the following:

First

In this form of animation, the entire functioning of the animation will take place on the left-hand side of the dialogue box. Controlling the scroll bar to generate blocks on the screen is one of the key functions over here.

Second

Keep moving down the scroll to ensure the appearance of a new block onto the screen simultaneously.

Third

The user can keep bringing down the scroll on the right end of the screen and can add as many blocks as required. The size of the scroll will diminish as the number of blocks increases. The position of the scroll can be observed on the right-end side with the mouse cursor which will automatically indicate the flow of block slides to appear one after another.

It is important to note that, irrespective of the number of the blocks that have been created, each block can have a full screen page within the framework and the title and sub title can be included as per the convenience of the developer.

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
import React, { Component, Fragment } from 'react';
import Fade from 'react-reveal/Fade';

const animateList = [1, 2, 3, 4, 5];

export default class ReactReveal extends Component {
	render ( ) {
		return (
			<Fragment >
				{animateList.map((item, key) => (
					<div style = { styles.block } key = { key } >
						<Fade top >
							<h1 style = { styles.title } > {`block ${item}`} </ h1>
						</ Fade>
					</ div>
				))}
			</ Fragment>
		);
	}
}

const styles = {
	block: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		width: '100%',
		height: '100%',
		background: '#000',
		borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
	},
	title: {
		textAlign: 'center',
		fontSize: 100,
		color: '#fff',
		fontFamily: 'Lato, sans-serif',
		fontWeight: 100,
	},
};
javascript

You can easily line up the commands and improvise the font size, color, width, background, as well as the text alignment.

You can also create an animateList constant. It is a form of array that is comprised of five elements. After the application of the array method map, it is feasible for you to render each and every element existing within the Fade components and introduce the items to the specific title.

Do note that the Const styles will be comprised of short-type of CSS styles for the created block as well as the title. In the example that has been shown above, we have displayed five blocks functioning under the application of Fade animation right from the top.

The Application of React Reveal Framework in Create React App

Apart from the number of components accessible in the library, and the level of animation achieved in the framework, the application of the React Reveal framework in the development of creating React App is utmost crucial.

In order to commence the guide in this direction, it is essential to build a new project and install React Reveal.

1
2
3
4
npx create-react-app my-app
cd my-app
npm i react-reveal --save
npm start 

Once you open the my-app/src/app.js, it will be visible for you to track the below mentioned code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// This example is live editable
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render ( ) {
    return (
      <div className = "App" >
        <header className = "App-header" >
          <img src = { logo } className = "App-logo" alt = "logo" />
          <h1 className = "App-title">Welcome to React</ h1>
        </ header>
        <p className = "App-intro" >
          To get started, edit <code > src/App.js </ code> and save to reload.
        </ p>
      </ div>
    );
  }
}

export default App;
javascript

The above code results in the following image:

Imgur

You can further zoom the header using the below code:

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
// This example is live editable
import React, { Component } from 'react';
import logo from './logo.svg';
import Zoom from 'react-reveal/Zoom'; // Importing Zoom effect
import './App.css';

class App extends Component {
  render ( ) {
    return (
      <div className = "App" >
        <Zoom >{ /* Using Zoom Effect */ }
          <header className = "App-header" >
            <img src = { logo } className = "App-logo" alt = "logo" />
            <h1 className = "App-title" >Welcome to React</ h1>
          </ header>
        </ Zoom>
        <p className = "App-intro" >
          To get started, edit <code > src/App.js </ code> and save to reload.
        </ p>
      </ div>
    );
  }
}

export default App;
javascript

Conclusion

The wide array of animation components accessible in the library of React Reveal is something that makes it a one stop solution for both the budding and veteran programmers. The framework on which the animation is executed and performed by the end user is a formidable one.

Nonetheless, in the advanced usage of the animation, especially in the app elements, it is much easier for the developer to include simple reveal effects. So, whenever there is a necessity of React JS component transition on Render using React Reveal, one can implement this approach without a second thought.

References

While writing this guide, the following resources have been referred to:

0