Creating animation in the React application is a popular topic. Many developers only animate using CSS, adding classes to HTML tags. This is a great way, but if you want to create complex animations, pay attention to other approaches.
1. CSS method
This is one of the best techniques for simple animation. If you use it instead of importing JavaScript libraries, the assembly remains small and the browser spends less resources. This greatly affects application performance. If you have a simple animation and are worried about the size of your build, pay attention to this method.
2. ReactTransitionGroup
This add-on was developed by guys from the ReactJs community. ReactTransitionGroup easily implements basic CSS animations and transitions.
Developers describe this library like this:
A set of components for managing states over time, specifically designed for animations.
Three things you need to know about this component:
ReactTransitionGroup changes classes as the component's life cycle changes. The animated style, in turn, should be described in CSS classes.
ReactTransitionGroup is small. It must be installed in the React application package and will not significantly increase your build. You can also use CDN.
ReactTransitionGroup has 3 components (Transition, CSSTransition and TransitionGroup). To start the animation, you need to wrap the component in them.
3️. React-animations
React-animations is a library built on animations from animate.css. It is easy to use and has many animation collections. React-animation works with any inline-style library that supports using objects to define key animation frames, such as Radium, Aphrodite, or styled-components.
4️. React-reveal
React Reveal is an animated framework for React. It has basic animations, such as fading out, reflection, scaling, rotation, and other more complex animations. It allows you to manage all the animations using props, for example, to set additional settings: position, delay, distance, cascade and many others. You can see them here. You can also use custom CSS effects, server rendering, and high order components. If you prefer to use scroll animation, this framework is for you.
5️. TweenOne and animation in Ant Design
Ant Design is the React UI library, which is a host of easy-to-use components. This is a useful component for creating elegant user interfaces. Ant Design was created by the Chinese conglomerate Alibaba, which uses it in many of its projects.
