Animations are smooth, easy to use, and play an important role in improving user experience. React development is now part of every user’s job in the apps we use every day.
Some ways to animate your React app.
Animation in React.Js applications is a hot topic and there are many ways to create different types of animations. It is a good method and it should be used. If you want to create complex animations, you can follow GreenSock. GreenSock is the most powerful animation platform. There are also many libraries for creating animated components with React.
Let’s talk about them.
- CSS method
- React-transition-group – An add-on that makes it easy to implement basic CSS animations and transitions.
- ReactReveal – This is React’s animation framework.
- TweenOne — ant. design library for animation
Of course, there are many React development services open-source animation libraries and components. I want to explore. However, this article does not discuss these libraries. You also receive a bonus in the form of a remarkable library at the end of the article.
CSS method
This method is one of the best for simple animations. If you use it instead of importing the javascript library, the package is still small. And the browser consumes fewer resources. These two points also have a huge impact on the productivity of applications. If you have simple animations and care about your bag size, keep that in mind.
Let’s look at an example hamburger menu:
This menu is easy to use, has CSS attributes, and triggers className=”is-nav-open” in the HTML tag. There are several ways to implement this example. One of them is to create a wrapper on the navigation and trigger the margin change. The width of the navigation is constant at 250 pixels. And a wrapper with margin-left or translateX properties of equal width. If you need to show the navigation, you need to add className=”is-nav-open” to the wrapper and move the wrapper to margin-left/translateX:0;
ReactTransitionGroup
This add-on was developed by members of the React Js development company. ReactTransitionGroup creates it easy to execute basic CSS animations and changes.
The developer describes this library as follows:
Anyway, there are three things you need to know about add-ons.
- React Transition Group changes class when a component’s lifecycle changes. Next, the animation style must be written as a CSS class.
- ReactTransitionGroup size is small. It must be installed in the React app bundle, and the bundle cannot be significantly increased. However, you can use a CDN.
- ReactTransitionGroup has three components (Transition, CSSTransition, TransitionGroup). You have to wrap the component to get the animation.
Let’s see how to create a similar animation.
First, you need to import CSSTransitionGroup from react-transition-group. Then you need to wrap the list to set the transitionName property. Whenever children of a CSSTransitionGroup are added or removed, the animation style is obtained.
If you set the transitionName=”example” attribute, the stylesheet class must start with the name of the example.
You can see that the ReactTransitionGroup version is used by default.
All you need is this. Of course, we have to add some logic. Two ways of implementing the sample contact list should be described.
handleAdd— Adds a new contact. It takes an arbitrary name and pushes it into the state. items array. (use random name packet as random name)
handleRemove— Removes a contact from the index in the state.items array.
Animation in TweenOne and AntDesign.
Ant Design is a ReactUI library with lots of easy-to-use components. It is a handy component for creating elegant user interfaces. Ant Design was created by Alibaba, a Chinese conglomerate, and has many famous names such as Alibaba (of course), Tencent, Baidu, etc.
React.Js development companies thinks you’ve heard of Ant Design, so let’s think about the animations on the login page.
I want to show you a short version because all elements have similar animations. Selected globe with elements like green balls and red squares in the background. Our animation looks like this:
This animation uses the TweenOne component, but you need a PathPlugin to use the path in the animation. Pushing the PathPlugin to TweenOneplugins works.
You don’t have to worry about this code. You need to pay attention to the TweenOne component. It’s easy to remember that this component can be imported from rc-tween-one. It is used as a basic component for basic props and animation props. It’s our entertainment! Each TweenOne has its own animation rules: redSquare, track, greenBall, etc.
React Reveal
React Reveal is React’s animation framework. There are basic animations like fade, flip, scale, rotate, etc., and many more advanced animations. This way you can control any animation using props like position, delay, distance, and cascade. You can see them here. You can also use custom CSS effects. Use this frame to animate while scrolling. Find out how it works.
Let’s take a look at the scrolling effect of this animation.
There are 5 blocks, each with a full-screen page and a header.
Create an animated list constant. The array contains 5 elements. After mapping using the array method, you can render each element of the Fade component and insert the element into the header. Const styles provide short CSS styles for blocks and headings. From above I have 5 squares with fade animations.
Author Bio
Kamal Singh is a Digital Marketing Manager at Devstringx, a pioneer in AngularJs development copmany, Globally. Kamal has a keen interest in marketing, technology, and new innovations. He likes traveling and sharing his knowledge through his content. He also loves blogging and he posts regularly about technologies, marketing, and new innovations from the past 2 years.
