Author avatar

Vivek Kumar

Animating a ReactJS Component Using Ant Design

Vivek Kumar

  • Jun 11, 2019
  • 9 Min read
  • 604 Views
  • Jun 11, 2019
  • 9 Min read
  • 604 Views
Web Development
React

Introduction

When we talk about basic animation, from the gif memes to the slider pages of a dynamic commercial website, then there have been many components helping out the user in the framework. We have discussed a few of the important ones in my previous guides. In this Guide, we are going to discuss a sort of React UI library which has an abundance of easy to apply elements that add multiple dimensions to the animation you will be trying to materialize. So, let’s commence learning how to animate a React JS component on Render with the help of Ant Design.

The application of Ant Design is widely regarded as one of the highly acclaimed components for the creation of seamless user interfaces. The creation credit of this component goes to the Asian conglomerate giant Alibaba and its users are some of the most renowned names in the world including Tencent, Ant Financial, Koubei, Meituan, Didi, Eleme, and Baidu.

A Brief on Ant Design

The objective of this design language is to uniformly maintain the user interface, especially for the internal background projects. It also helps in curtailing the excessive design differences in cost and implementation. It liberates the design resources as well as resources meant for front-end development.

Since the inception of this design language until today, Ant Design has enhanced the experience of both product designers and the end users. Here, it is worth noting that the user experience designers, as well as the user-interface designers, are collectively termed as product designers. It is harsh but true that, in the contemporary world of animators, the work and job role is so cross-linked that the thin line of difference between product managers, develop engineers, interaction designers, visual designers, and front-end developers has been blurred even further. Now, this design language is ensuring that the prototype and the design remains unpretentious and accessible for the project members of every class and section. Ant Design does this with the help of unitary specifications and comprehensively upholds the development proficiency and experience of the background products and applications.

An Illustration

In order to understand the basic work of Ant Design, we are going to demonstrate its role in a sample animation on a type of landing page.

Imgur

There are multiple animated elements in this diagram. There are different geometrical shapes working in tangent and shapes. Here, the animation is in a framework of one to two seconds where all the transition objects wobble from their actual position to and fro in order to create the basic structure of the animation. One of the key challenges for the basic animators here is that the transition will take place between multiple components simultaneously.

As one can find a number of elements in the transition taking place above, it can generate a slight confusion among the users who are starting right from the basic level. In order to ensure a better understanding, let’s have a glance at a shorter version.

Imgur

Now, here we have constrained the whole animation to a short version that is easier to understand for the user. It is easier to understand because there are fewer elements which are identical to one another in terms of animation. We have picked the globe with the green color ball along with one element. Here, the one specific element that we have chosen is a red square existing in the background.

In order to realize this sort of animation, the application of TweenOne component is used. It is noteworthy that, in order to use the path in animation, there is a requirement of the PathPlugin. It will usually work when the user pushes the Pathplugin to TweenOne.plugins.

1
TweenOne.plugins.push(PathPlugin);
javascript

Basic Animation Parameters

In this next step of this guide, we will shed some light on some of the basic animation parameters:

  1. The Time Duration: The time of the animation will be in ms.
  2. The ease of animation: The ease of doing the animation scaling from easy to tough.
  3. YoYo compatibility: Moving to and fro with each form of repetition.
  4. Repeat Animation: In order to conduct a repeating animation process, the user is required to apply -1 in order to procure an indefinite process.
  5. P: The parameter denotes the coordinates of the path for the animation.
  6. easePath: Enable a seamless path coordinates for the animation to work.

In general terms, you need not worry about the penultimate and ultimate parameters in the list; as those parameters are more specific to Scalable Vector Graphics (SVG).

1
2
3
4
5
6
7
8
9
10
11
const duration = 7000;
const ease = 'easeInOutSine';
const p = 'M123.5,89.5 C148,82.5 239.5,48.5 230,17.5 C220.5,-13.5 127,6 99.5,13.5 C72,21 -9.5,56.5 1.5,84.5 C12.5,112.5 99,96.5 123.5,89.5 Z';
const easePath = 'M0,100 C7.33,89 14.33,81.66 21,78 C25.36,75.60 29.87,72.90 33,70 C37.04,66.24 39.39,62.07 42.5,57 C48,46.5 61.5,32.5 70,28 C77.5,23.5 81.5,20 86.5,16 C89.83,13.33 94.33,8 100,0';

const loop = {
	yoyo: true,
	repeat: -1,
	duration,
	ease,
};
javascript

The Front-End Implementation

The React JS component is used to compress a library of elements which can be expressed in Ant Design language. The adaptability is one of the key aspects that makes this design language an ideal choice for front end implementation. There are many design systems accessible for the front-end frameworks that the developers from the designer community can pick from. Some of the common choices (apart from Ant Design of React JS) that are widely used in the current community include NG-ZORRO - Ant Design of Angular / Ant Design of Vue / NG-ZORRO-MOBILE - Ant Design Mobile of Angular / vue-beauty (vue) / antue (vue) / antd-ember, and antizer (ClojureScript).

Now, coming back to the object animation guide, let’s commence with the creation of an animation object which is comprised of given types of animation:

  1. redSquare:  The animation is comprised of loop params, which we explain below, the Y coordinate, the time-specific duration, and delay.
  2. greenBall: It is comprised of the path with object params x and y as value p, the time duration, the ease, and repeat.
  3. path: It enables the easePath coordinate.
  4. lengthPixel: It works in the segregation curve along the 400 sections.
  5. track: It is an oval shaped with the axis that is comprised of the loop styles, as well as the rotate param.

One can understand the application of these animations in the following code lines:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const animate = {
	redSquare: {
			loop,
		y: 15,
		duration: 3000,
		delay: 200,
	},
	greenBall: {
		path: { x: p, y: p },
		duration: 5000,
		repeat: -1,
		ease: TweenOne.easing.path(easePath, { lengthPixel: 400}),
	},
	track: {
			loop,
		rotate: 15,
	},
};
javascript

You don't have to be concerned about this code much as you are required to focus upon the TweenOne component.

1
2
3
<TweenOne component = "g" animation = { animate.redSquare } />
<TweenOne component = "g" animation = { animate.track } />
<TweenOne component = "g" animation = { animate.greenBall } />
javascript

It is critical to keep in mind that these components will be introduced from rc-tween-one. It is applied as rudimentary a component with both the base props as well as animation props. Now, the finished product of the animation is ready. Each TweenOne has its own sort of animation rules such as redSquare, greenBall, track, etc.

As you can see, the creation of animation with this design language is not a tough nut to crack. As a user, all you are required to do is elaborate upon the animation rules and then transfer those rules to TweenOnecomponent.

Conclusion

Ant Design language is recommended due to its versatility and the widespread utility it can render to the designers and developers at each level. It is seamless and is proficient enough to eliminate the complications when a number of animation components work simultaneously. It is one of the few frameworks that dominate every continent across the globe due to its seamless proficiency and stable results without compromising with the storage size and results in quick rendering.

So, one can certainly animate a React JS component on render using Ant Design and anticipate strong results.

References

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

3