Author avatar

Vivek Kumar

Animating a ReactJS Component Using React Animations

Vivek Kumar

  • Jun 11, 2019
  • 10 Min read
  • 906 Views
  • Jun 11, 2019
  • 10 Min read
  • 906 Views
Web Development
React

Introduction

The creation of the React component is one of the essential learnings that the developers are required to go through right from the beginning. The developers know the fact that the library for the React animations is created with animate.css. It ensures an easier application and is comprised of a plethora of animation segments to choose from.

It doesn’t matter which sort of inline style library we are talking about, until the point it supports the object application like keyframe animations like Aphrodite, Radium, etc, the React animation can be put to use. Here, in this guide, our preference will be to get an insight on how to use the style components in React animations and how to animate the React JS component on Render. After the completion of this guide, it will be easier for you to understand how a basic React animation is built and how, one can improvise to avail better animation results every time.

Basic React Animation Example

We encounter this sort of animation component on a daiy basis in gif memes existing over the social media. One of the common React animation examples can be represented by the following image taken from a known gif meme, which displays an awe expression.

A typical gif image used to display an awe expression

The animation duration usually lasts 1 to 2 seconds and captures the moment of a particular character or object within that timeframe.

For instance, in this particular image, the camera is zooming in to capture the essence of the expressions denoting the vibe the meme is related to.

Now, it is not hard to realize in which places this kind of animation usually comes handy. But how it actually works is something that is worth mentioning.

In order to see how it actually functions, let’s take an example of a Bounce animation.

1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import styled, { keyframes } from "styled-components";
import BounceIn from "@bit/formidablelabs.react-animations.bounce-in";
const BounceInAnimation = keyframes`___CSS_0___`;
const BounceInDiv = styled.div`
  animation: infinite 5s ___CSS_0___;
`;
export default (
  <BounceInDiv >
    <img src="https://picsum.photos/300/200/?random" />
  </ BounceInDiv>
);
javascript

Here, the image follows three repetatitive steps:

  1. The image appears from the center of the screen from opaque to a clear resolution.
  2. The image crosses the borders of the screen and fully pops out from inward to outward.
  3. The image bounces back and leaves proportionate margins on each side of the frame.

Now, let us learn to create a bouncing text step by step. First and foremost, you need to pick the selected animation from react-animations.

Next, apply the styled component after the creation of the wrapped component with the rudimentary keyframes and transition style.

1
const Bounce = styled.div`animation: 2s ___CSS_0___ infinite`;
javascript

Do note that once the component is formed, the user is required to wrap up any kind of add-on component or HTML for animation.

The programming code as well as a directive example is mentioned below for your reference:

1
<Bounce ><h1 > This Animation Bounces </ h1></ Bounce>
javascript

The complete code is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';

const Bounce = styled.div`animation: 2s ___CSS_0___ infinite`;

export default class ReactAnimations extends Component {
	render () {
		return (
			<Bounce ><h1 > This Animation Bounces </ h1></ Bounce>
			);
	}
}
javascript

Once implemented, the animation can work seamlessly. Do note that it is meant for basic types of animation only and is quite simple to execute. If you are planning to try it on a more advanced level, then it is professionally recommended to apply this animation on scroll. It can be done simply via React-animate-on-scroll.

The Application of the React Animations with Radium

You can import all kinds of animation straight from the chief package.

1
import { fadeIn } from 'react-animations'
javascript

Or you can also import a particular animation, as shown:

1
import fadeIn from 'react-animations/lib/fade-in'
javascript

If you are applying the React animations with the help of Radium then the following set of codes could help you right away. The bounce animation, which is rendered on this platform, is stable, reliable, and seamless.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import { bounce } from 'react-animations';
import Radium, {StyleRoot} from 'radium';

const styles = {
  bounce: {
    animation: 'x 1s',
    animationName: Radium.keyframes(bounce, 'bounce')
  }
}

class Test extends React.Component {
  render() {
    <StyleRoot >
      <div className = "test" style = { styles.bounce } >
      </ div>
    </ StyleRoot>
  }
}
javascript

The Application of the React Animations with Aphrodite

The following code can be implemented by the developer in order to fetch good results. The bounce animation acquired here will surely be stable as the duration will only be of a second.

1
2
3
4
5
6
7
8
9
import { bounce } from 'react-animations';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  bounce: {
    animationName: bounce,
    animationDuration: '1s'
  }
})
javascript

The Application of React Animation with the Help of Network Service Security of Java (JSS)

In order to fetch the best results on Java Interface, it is advisable to use the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
import { bounce } from 'react-animations';
import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(preset())

const {classes} = jss.createStyleSheet({
  '@keyframes bounce': bounce,
  bounce: {
    animationName: 'bounce',
    animationDuration: '1s',
  },
}).attach()
javascript

The Application of React Animations with Styled Components

In order to attain better results in the bounce animation with the help of styled components, the developer can emphasize on the following lines of code:

1
2
3
4
5
6
7
8
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';

const bounceAnimation = keyframes`___CSS_0___`;

const BouncyDiv = styled.div`
  animation: 1s ___CSS_0___;
`;
javascript

The Application of React Animations with fela-JavaScript

For effective code lines for an animation of 2 seconds, the following commands will aid you in a superlative manner. The key application of this component primarily emphasizes the background of the bouncing animation, including the height and the width.

Import and render the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import { render } from 'react-dom';
import { createRenderer } from 'fela';
import { createComponent, Provider } from 'react-fela';
import { bounce } from 'react-animations';

const mapStylesToProps = ({ background, height, width }, renderer) => ({
	animationName: renderer.renderKeyframe(() => bounce, {}),
	animationDuration: '2s',
	background,
	height,
	width,
});

const BouncingDiv = createComponent(mapStylesToProps, 'div');

render(
	<Provider renderer = {createRenderer()} >
		<BouncingDiv background = "red" height = "100px" width = "100px" />
	</ Provider>,
	document.getElementById('root'),
);
javascript

The Categories of Animations

All kinds of animations that can be worked upon and rendered in React are mentioned below:

1
2
3
4
5
6
7
8
9
10
11
12
13
bouceOut / bounce / bounceIn / bounceInDown / bounceInLeft / bounceInRight /
bounceInUp / bounceOutDown / bounceOutLeft / bounceOutRight / bounceOutUp /
fadeIn / fadeInDown / fadeInDownBig / fadeInLeft / fadeInLeftBig / fadeInRight /
fadeInRightBig / fadeInUp / fadeInUpBig / fadeout / fadeOutDown /
fadeOutDownBig /  fadeOutLeft / fadeOutLeftBig / fadeOutRight / fadeOutRightBig /
fadeOutUp / fadeOutUpBig / flash / flip / flipInX / flipInY / flipOutX / flipOutY /
headshake / hinge / jello / lightSpeedIn / lightSpeedOut / pulse / rollIn / rollout /
rotateIn / rotateInDownLeft / rotateInDownRight / rotateInUpLeft / rotateInUpRight /
rotateOut / rotateOutDownLeft / rotateOutDownRight / rotateOutUpLeft /
rotateOutUpRight / rubberBand / shake / slideInDown / slideInLeft / slideInRight /
slideInUp / slideOutDown / slideOutLeft / slideOutRight / slideOutUp / swing
/ tada / wobble / zoomIn / zoomInDown / zoomInLeft / zoomInRight / zoomInUp /
zoomOut / zoomOutDown / zoomOutLeft / zoomOutRight / zoomOutUp

The Application of React Animations with Merge

During the application of react-animations the developer can export a merge function which will enable a pair of animations and revert back with a new animation combining the features of both. If there are components that are contradicting each other then it will not work well with Merge. For example, if you are implementing fadeIn and fadeOut animation then it can create complications. The merged animation could be executed like any other form of imported transitions.

1
2
import { merge, tada, flip } from 'react-animations';
const tadaFlip = merge(tada, flip);
javascript

Conclusion

The animation of a React JS component on Render with React animations will broaden the skills of the developer in terms of basic transition displaying awe-inspiring style. One of the key strengths of this platform is the number of animation categories that the developer can access. There are also no bugs reported in the past or present pointing fingers on security concerns.

So yes, it is recommended to animate the React JS component with React animations, as it offers a win-win situation to both developer and the final user in terms of implementation and usage.

References

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

3