All language subtitles for 014 Alternative Animation Packages_en

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.