So in this module you learned a lot about react transition group,
this package which gives us all these components we used to animate things in react especially and
most of the time relevant when we are removing and adding elements to and from the dom.
There are alternatives to this package,
one popular alternative is react motion,
if you google for it you'll find the github repository where you find more instructions about it.
Now react motion follows a totally different approach, in react motion
for example you don't really define manually the timer animation should take,
instead react motion tries to emulate real world physics to figure out the best timing an animation
should take and it simply allows you to define end and starting states and it tries its best to use
this real world physics to emulate or to interpolate the state in-between.
You can check out the various demos on this page to see if that's an effect you want
and then of course dive into the docs linked
here on this page and seen on this page to use this library.
It can be tough to get started with react motion due to its very unorthodox way of thinking about animations
and some animations are kind of hard to do with it but it might be awesome for a lot of other cases
and might give you this more natural looking animation
look you might want for certain kinds of animations. Another alternative is react move for which you
can also simply google to find its github page or official web page. React Move has two basic components
it exposes to you which allow you to animate single items or groups of items, animate a node group
and with react move, you always work with objects describing the state of an animation. React move is
heavily influenced by the three JS transitions
so if you know that, you might have an edge using this and in the end, you could find detailed docs and
explanations on how it works in its documentation.
Here you do define durations but you then don't just define styles like opacity and so on
but you can really control way more with that and build more complex animations with it.
So this might be especially interesting to you if you have more complex animations and some examples
like this nice switching between US
states can be found on its page.
It also has an element for animating groups like here,
these bars.
Now again this is a little bit of a more complex library,
it might also have functionalities you don't need
so I recommend starting with react transition group but if you need more control, react move is an alternative
you might want to look into.
And finally, there is react router transition that's another library I want to mention, though I'll be
honest there are more libraries than that and you can get the feeling of a new react animation library
coming up every week but to react router transition is a very interesting and special one.
It is as the name suggests
there to allow you to easily create route transitions, so animations between different routes.
It builds up on react motion and it basically gives you this animated switch component which you
use to replace your normal router switch with and it's made to work with react router version four which
I covered in this course or higher, and animated switch then does all the same the normal switch does
but it allows you to define atEnter, atLeave, atActive and then a class name here which is
set up like this to allow you to animate the routing, so to animate the switching of pages and that is
something I wanted to mention,
you can dive deeper on this github repository where you find links to the docs because animating route
transitions can be very tricky with react transition group,
the package I showed in detail in this module. And with the react router transition package,
it's so much easier and it allows you to really build a nice looking, highly dynamic application and
add these route transitions
if you need them.