1 00:00:02,130 --> 00:00:06,390 So in this module you learned a lot about react transition group, 2 00:00:06,390 --> 00:00:13,500 this package which gives us all these components we used to animate things in react especially and 3 00:00:13,500 --> 00:00:18,830 most of the time relevant when we are removing and adding elements to and from the dom. 4 00:00:18,930 --> 00:00:21,630 There are alternatives to this package, 5 00:00:21,720 --> 00:00:25,340 one popular alternative is react motion, 6 00:00:25,400 --> 00:00:30,480 if you google for it you'll find the github repository where you find more instructions about it. 7 00:00:30,510 --> 00:00:35,490 Now react motion follows a totally different approach, in react motion 8 00:00:35,490 --> 00:00:40,910 for example you don't really define manually the timer animation should take, 9 00:00:41,100 --> 00:00:47,300 instead react motion tries to emulate real world physics to figure out the best timing an animation 10 00:00:47,370 --> 00:00:53,880 should take and it simply allows you to define end and starting states and it tries its best to use 11 00:00:53,880 --> 00:00:59,390 this real world physics to emulate or to interpolate the state in-between. 12 00:00:59,400 --> 00:01:03,850 You can check out the various demos on this page to see if that's an effect you want 13 00:01:03,990 --> 00:01:06,920 and then of course dive into the docs linked 14 00:01:06,920 --> 00:01:10,850 here on this page and seen on this page to use this library. 15 00:01:10,860 --> 00:01:17,970 It can be tough to get started with react motion due to its very unorthodox way of thinking about animations 16 00:01:18,360 --> 00:01:24,690 and some animations are kind of hard to do with it but it might be awesome for a lot of other cases 17 00:01:24,930 --> 00:01:28,330 and might give you this more natural looking animation 18 00:01:28,320 --> 00:01:35,610 look you might want for certain kinds of animations. Another alternative is react move for which you 19 00:01:35,610 --> 00:01:45,600 can also simply google to find its github page or official web page. React Move has two basic components 20 00:01:45,600 --> 00:01:51,970 it exposes to you which allow you to animate single items or groups of items, animate a node group 21 00:01:52,410 --> 00:02:01,140 and with react move, you always work with objects describing the state of an animation. React move is 22 00:02:01,140 --> 00:02:04,190 heavily influenced by the three JS transitions 23 00:02:04,200 --> 00:02:09,150 so if you know that, you might have an edge using this and in the end, you could find detailed docs and 24 00:02:09,330 --> 00:02:13,420 explanations on how it works in its documentation. 25 00:02:13,440 --> 00:02:20,130 Here you do define durations but you then don't just define styles like opacity and so on 26 00:02:20,310 --> 00:02:25,450 but you can really control way more with that and build more complex animations with it. 27 00:02:25,470 --> 00:02:32,220 So this might be especially interesting to you if you have more complex animations and some examples 28 00:02:32,220 --> 00:02:34,980 like this nice switching between US 29 00:02:34,980 --> 00:02:37,580 states can be found on its page. 30 00:02:37,590 --> 00:02:41,640 It also has an element for animating groups like here, 31 00:02:41,640 --> 00:02:42,990 these bars. 32 00:02:42,990 --> 00:02:46,740 Now again this is a little bit of a more complex library, 33 00:02:46,740 --> 00:02:49,210 it might also have functionalities you don't need 34 00:02:49,320 --> 00:02:56,690 so I recommend starting with react transition group but if you need more control, react move is an alternative 35 00:02:56,730 --> 00:02:58,590 you might want to look into. 36 00:02:58,750 --> 00:03:04,650 And finally, there is react router transition that's another library I want to mention, though I'll be 37 00:03:04,650 --> 00:03:10,560 honest there are more libraries than that and you can get the feeling of a new react animation library 38 00:03:10,590 --> 00:03:15,270 coming up every week but to react router transition is a very interesting and special one. 39 00:03:15,270 --> 00:03:16,740 It is as the name suggests 40 00:03:16,750 --> 00:03:22,550 there to allow you to easily create route transitions, so animations between different routes. 41 00:03:22,650 --> 00:03:29,520 It builds up on react motion and it basically gives you this animated switch component which you 42 00:03:29,520 --> 00:03:36,420 use to replace your normal router switch with and it's made to work with react router version four which 43 00:03:36,420 --> 00:03:44,100 I covered in this course or higher, and animated switch then does all the same the normal switch does 44 00:03:44,460 --> 00:03:51,300 but it allows you to define atEnter, atLeave, atActive and then a class name here which is 45 00:03:51,300 --> 00:04:00,750 set up like this to allow you to animate the routing, so to animate the switching of pages and that is 46 00:04:00,750 --> 00:04:02,370 something I wanted to mention, 47 00:04:02,400 --> 00:04:07,950 you can dive deeper on this github repository where you find links to the docs because animating route 48 00:04:07,950 --> 00:04:11,580 transitions can be very tricky with react transition group, 49 00:04:11,580 --> 00:04:17,030 the package I showed in detail in this module. And with the react router transition package, 50 00:04:17,130 --> 00:04:23,880 it's so much easier and it allows you to really build a nice looking, highly dynamic application and 51 00:04:23,890 --> 00:04:25,890 add these route transitions 52 00:04:25,890 --> 00:04:26,740 if you need them.