React animation works with any inline style library that supports the use of objects to define keyframe animations, such as Radium, Aphrodite or styled-components.The best 5 ways to animate a React app in 2019
Animation in ReactJs app is a popular topic and there are many ways to create different types of animations.Many developers create animation exclusively using css and adding classes to HTML tags. This is a great way and you should use it. If you want to create complex animations you can pay attention to GreenSock. GreenSock is the most powerful animation platform. There are also a lot of libraries, components for creating animation in React. Let’s talk about them 😎
Of course the open source has much more animation libraries and components. I would like to explore it. But this article will not contain the libraries. You will also receive a bonus at the end of the article in the form of libraries which deserve your attention.
👨💻 Let’s get started.
I would like to show you how to do the animation using css. Let’s look at the hamburger menu example:👇
This menu is easy-to-use with css property and trigger
className="is-nav-open" for html tag. There are a lot of ways of implementing this example. One of them is to create a wrapper above navigation and to trigger changes in margin. The navigation has constant width equal
250px. And the wrapper with
translateX property with the same width. When we need to show the navigation we have to add
className="is-nav-open" for the wrapper and move the wrapper on
And css styles:
Believe me, it’s necessary to use this method in most situations. We are better off writing several css lines and triggering the className than importing big libraries and implementing it in your projects. The users will be grateful to you that your browser reproduces app quickly.
But sometimes, you have to use other methods. What other ways exist?Let’s have a look at next method.
This add-on component has been developed by guys from ReactJs community. ReactTransitionGroup is easy to implement basic CSS animations and transitions.
Developers describe this library as:
“A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.”
Anyway, three things you need to know about it add-on component:
Let’s take a look how to make a similar animation 👀👇
First you need to import
react-transition-group. After that you have to wrap the list in it and set
transitionName props. Whenever the child in
CSSTransitionGroup is added or deleted it will get the animation styles.
If you set
transitionName="example" props, the classes in the style sheets should start with an example name.
You can see the basic usage
ReactTransitionGroup version. 👀
And this is everything you need. Of Course you need to add some logic.We should describe two methods to the realization of our example contact list:
handleAdd — adding new contacts, it gets a random name and push it to array state.items. (it uses random-name package for random name)
handleRemove — removing contact by index in the
React-animations — the library is built on all animations with animate.css. It is easy to use and has a lot of animation collections. React-animation works with any inline style library that supports the use of objects to define keyframe animations, such as Radium, Aphrodite or styled-components. I prefer to use the styled-components.
You can see some animations on gif: 👀👇
I know what you think 😄
As soon as you’ve seen these animations you’ve realized where you could use them. Let’s take a look at how this works. For example — Bounce animation.
The first thing you need in to import chosen animation from
As I mentioned earlier I use the styled-component after creating wrapped component with animation style and basic keyframes.
When the component is created you need to wrap up any HTML or the component for animation.
The animation works. This animation is basic and so easy.
There is some good solution for using this animation on scroll — react-animate-on-scroll.
React Reveal is an animation framework for React. It has basic animations such as fade, flip, zoom, rotate and a lot of more advanced animations. It allows you to control all animations with props, for example: the position, delay, distance, cascade and many others. You can see them here. You can also use the custom css effects. Also it has server side rendering and high order components. If you prefer to use animation on scroll this framework for you. Check out how it works.
Let’s look at this animation for scroll effects.👀👇
We have 5 blocks, each of which have a full-screen page and a title inside.
animateList constant. This array contains 5 elements. After using the array method
map you can render each element in
Fade components and inserts our items to the title. The Const styles have short css styles for our block and the title. We’ve got 5 blocks with
Fade animation from the top.
Ant Design is a React UI library that is a plethora of easy to use components. It is useful component for building the elegant user interfaces. Ant Design created by Chinese conglomerate Alibaba and it has used by a lot of well known names: Alibaba (of course), Tencent, Baidu, and many others.
You’ve probably heard about Ant design so let’s consider its animation on their landing page.👇
As you can see there are a lot of animated elements. I’d like to show you a short version, because all elements have a similar animation. I chose the globe with a green ball and one element, for example a red square, on the background. Our animation would look like this.
I’ve used the
TweenOne component in this animation but it needs the
PathPlugin for using the path in animation. It will work when you push the
The next step let’s describe the Basic animation parameters:
You don’t need to worry about last two parameters are more specific for this svg.
Next we’ll create an animation object. This object has 3 types of animation:
p. Duration, repeat and ease —
TweenOne.easing.path— function with two params:
You don’t need to worry about this code. You have to pay attention to
TweenOne component. Let us remind briefly, these components will be imported from
rc-tween-one. It’s used as basic components with base props and animation props. It is our animation! Every
TweenOne has it’s own animation rules as
😄 It looks scaring. But in fact, you need to pay attention to these lines.
As you noticed, creating the animation with this method is a simple way. All you need is to describe the animation rules and to transfer them to
There are a lot of ways using animation. All of them require different approaches. Today we have reviewed some decisions that you can use in your projects. Choose the method which suits you 👨💻
One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.