The author | Dmitry Nozhenko source | Medium Javascript, please click on the “reading” to obtain the author more quality articles
Animations in ReactJs applications are a popular topic, and there are many ways to create different types of animations. Many developers specialize in using CSS to create animations and add classes to HTML tags. This is a good method, and you should use it. If you want to create complex animations, look at GreenSock. GreenSock is the most powerful animation platform. There are also many libraries for creating components for animations in React.
Let’s talk about them here π
The CSS method,
β’ React-transition-group — it’s a simple add-on to the basic CSS animation and transition implementation.
β’ React-animations – React-animations implement all animations in animate. CSS. Easy to use!
β’ React Reveal — This is the React animation framework.
β’ TweenOne — Ant. Design library for animation
Of course, there are many more open source animation libraries and components. I want to explore that. However, these libraries will not be included in this article.
π» Here we go.
The CSS method
For simple animations, this method is one of the best. When you use it instead of importing javascript libraries, your packages can stay small. And browsers use fewer resources. These two factors also greatly affect application productivity. Note this approach if you have simple animations and are worried about package size.
I want to show you how to animate using CSS. Let’s take a look at an example burger menu: π
The menu is easy to use, makes CSS properties and triggers className=” IS-Nav-open “for HTML tags. There are many ways to implement this example. One is to create a wrapper above the navigation and trigger margin changes. The width of the navigation is equal to 250px. And the margin-left or translateX property of the wrapper has the same width. When we need to display navigation, we must add className=” IS-nav-open “to the wrapper and move it to margin-left/translateX:0; On.
CSS styles:
Trust me, you have to use this method in most cases. Rather than import a large library and implement it in a project, it’s better to write a few CSS lines and trigger className. Users will thank your browser for quickly replicating the application.
But sometimes, you must use other methods. Is there any other way? Let’s look at the next approach.
2. ReactTransitionGroup
This add-on was developed by the ReactJs community. ReactTransitionGroup makes it easy to implement basic CSS animations and transitions.
The developers describe this library as:
“A set of components designed specifically for animation that manage the state of components over time, including installation and uninstallation.”
There are three things you need to know about this add-on:
β’ The React Transition Group changes classes when the component lifecycle changes. Instead, the animation style should be described in a CSS class.
β’ ReactTransitionGroup size is small. It should be installed in the React application’s package and won’t greatly increase your package size. But you can use CDN.
β’ ReactTransitionGroup has three components (Transition, CSSTransition, and TransitionGroup). To get the animation, you need to wrap the component in it.
Let’s see how to make a similar animation ππ
First, you need to import the CSSTransitionGroup from the react-transition-group. You must then use it to wrap the list and set the transitionName property. Every time a child is added or removed from the CSSTransitionGroup, it gets the animation style.
If the transitionName=”example” attribute is set, the class in the stylesheet should start with the example name.
You can see the version of the basic usage ReactTransitionGroup. π
That’s all you need to do. Of course, you need to add some logic. We should describe two approaches to contact list implementation:
β’ handleAdd — Adds a new contact, which gets a random name and pushes it to the array state.items. (It uses the random name package as the random name)
β’ handleRemove – Deletes contacts through the index in the state.items array.
3. React-animations
React-animations – This library is built around all animations with animation.css. It is easy to use and has many animation collections. React-animation can be used with any inline style library that supports defining keyframe animations using objects (such as Radium, Aphrodite, or style components). I prefer to use styled components.
You can see some animations on the GIF below: ππ
I know what you think π
Once you see these animations, you know where you can use them.
Let’s see how it works. For example – bounce animation.
First you need to import the selected animation from the React -animations.
As I mentioned earlier, after creating the wrapper component with the animation style and basic keyframes, I’ll use the style component.
After creating the component, you need to wrap any HTML or components for animation.
Example:
This animation is very simple.
There are some great solutions to using this animation on scrolling – react-animate-on-scroll.
4. React-reveal
React Reveal is the animation framework for React. It has basic animations such as fade in and out, flip, zoom, rotate, and many more advanced animations. It allows you to control all animations using items, such as position, delay, distance, cascade, etc. You can see them here. You can also use custom CSS effects. It also has server-side rendering and higher-order components. If you prefer scrolling with animations, you can use this framework. See how it works.
Let’s take a look at the scrolling effect of this animation. π π
We have five blocks, each with a full screen page and a title.
We create the animateList constant. The array contains five elements. After using the array method mapping, you can render each element in the Fade component and insert our item into the title. Const styles have short CSS styles in our blocks and titles. There are five blocks with Fade animations at the top.
Animations in TweenOne and Ant Design.
Ant Design is a React UI library that contains a number of easy-to-use components. It is a useful component for building elegant user interfaces. Developed by Alibaba and already used by many big companies: Alibaba (of course), Tencent, Baidu, etc.
You’ve probably heard of Ant design, so consider its animation on its target web page. π
As you can see, there are a lot of animation elements. I want to show you a short version because all the elements have similar animations. I chose a globe with a green ball and an element (such as a red square) as a background. Our animation looks something like this.
I use the TweenOne component in this animation, but it requires the PathPlugin to use paths in the animation. It works when you push the PathPlugin to tweenone.plugins.
Next, we will describe the basic animation parameters:
β’ duration-time animation (in milliseconds),
β’ Ease – Animate ease,
β’ Yoyo – Alternate forward and backward with each repetition.
β’ Repeat — Repeat the animation. You must use -1 for indeterminate procedures.
β’ P — The path coordinates of the animation
β’ easePath — easePath coordinates for the animation
You don’t need to worry about the last two arguments to this SVG.
Next, we will create an animated object. This object has three types of animation:
β’ redSquare – it has loop parameters (described below) as well as Y coordinates, duration and delay.
β’ greenBall — It has a path to the object parameter x, where y is the value p.
β’ Path-Easepath coordinates.
β’ lengthPixel — Divides the curve into 400 sections.
β’ Track — an ellipse whose axis has a cyclic style and rotation parameters.
You don’t need to worry about this code. You must pay attention to the TweenOne component. Let’s briefly remind you that these components will be imported from rC-Tween-One. Used as a base component along with base and animation properties. This is our animation! Each TweenOne has its own animation rules, such as redSquare, Track, and greenBall.
It looks scary. But really, you need to pay attention to these lines.
As you can see, it is an easy way to create an animation using this method. All you need to do is describe the animation rules and transfer them to the TweenOne component.
conclusion
There are many ways to use animation. All of these require different approaches. Today, we’ve looked at some of the methods you can use in your projects. You can choose the method that works for you π¨
