Usher life to your React apps using AnimeJS
Animation is an important aspect of any app we use these days. It’s gives us validation or reaction to our actions. That’s the rule of nature. We expect to see something react to our action. Hence, bringing this real world behaviour to our web applications means bringing a more natural and instinctive usage flow to the app users.
Animation on web has been there from quite old times. There have been many libraries you must have heard of like GSAP(GreenSock Animation Platform) and VelocityJS. They’re immensely popular and mature. GSAP has a lot to offer, but some of its plugins are paid as I’ve found. Why I chose AnimeJS over other animation libs is because it’s just 6.7KB Gzipped, quite less contrary to other libs and has a lot of features out of the box supported by other libs like GSAP. The documentation is neat and precise with demo examples side by side as well.
Motivation
The thing is that all these animation libs are built with pure DOM in mind which is a good thing because ultimately you can’t animate Virtual DOM. Hence, it’s not as simple as writing a JQuery animation script as in the early days like this
$('#target_id').fadeOut(300, function(){ $(this).remove();});We have sophisticated Web Component lifecycles in place with all the frameworks we use today. So, for eg: adding a fadeOut transition on component unmount lifecycle hook will not show up since the component is unmounted from the DOM by the time the said transition starts to happen. This is where React Transition Group and similar libs in other frameworks come handy which kind of taps into the react component lifecycle and expose methods to control such behaviour well.
@mollycule/react-anime
Keeping all these things and easy developer usage in mind, I’ve built this library @mollycule/mason available on NPM. It makes applying animations to your React elements very simple as below
Here, it uses a blend of props for both ReactTransitionGroup and AnimeJS, making it very easy and straight-forward for usage. You can specify different animation parameters for different phases or have a general set of parameters at root level. The meaning of each and every prop is discussed in detail here in the documentation here.
Group or List Staggered Animation
It’s quite easy to add a staggered animation on a group of elements as below
You can simply enclose multiple children inside <Anime> element and add relevant anime params like delay set to stagger of 60ms and it’ll give this beautiful bottom-up stacking animation effect.
Dynamically entering and exiting list items using TransitionGroup
When there’s a use case of dynamically adding or removing the elements from the array of elements in a state variable, each element has to be individually wrapped in its own Anime or Transition element. The in prop of each element is provided by the virtue of TransitionGroup element in this case. It takes care of mounting and unmounting child elements by passing the accurate in prop accordingly.
Imperatively controlling animation by Anime helper methods
Anime supports various helper methods for controlling the animation instance like play/pause/reset on some event. One can grab the reference of the current animation instance by passing React ref in animeRef prop as
Summary
So go ahead and don’t get intimidated by the whole idea of integrating at least basic fade in, translate or bouncy enter-exit animations in your React app. It’s quite simple using this React friendly <Anime /> component.
Thank You 🤓
