Trying react-spring (React animation library) for the first time

Key Takeaways

it is Friday I hope you had a good week on this mondays livestream I tried out react spring for the first time which is this really nice animation framework that is physics based instead of duration based and it also has this really nice react hooks like API which was so nice to work with I never use react spring ever before this episode so I think it's like a great testament to its ease of use and and documentation and polish that managed to get something out there like I had it's such a blast working with it and as usual with these live mob programming sessions I would not have been able to figure it out without the help of you find people in chat that join the live stream thank you so much before we jump to the recording of this Monday's live stream I would like to take the opportunity to thank today's sponsor it's a long-standing one brilliant brilliant is really nice if we want to jump in and learn the computer science fundamentals like sorting algorithms and data structures like trees and graphs and stuff like that I don't really like brilliant because they kind of complement the show you know fun functions is a little bit like a cooking show we show different things I do them on screen and then code and stuff and that's good to know but in order to actually learn something you need to sit down yourself and do it and that's kind of what brilliant is because it's it's not something you watch passively it's these interactive challenges where you have to figure out a problem on your own brilliant is simply a very solid product if you want to learn computer science fundamentals you should go to brilliant dot org slash FFF use that length to show them that you came from here but also because you get 20% of the annual subscription thank you brilliant for supporting the show now on to the recording of this month is twitch livestream all right let's let's code this code some stuff alright so today I I'm gonna just I'm gonna show you what I'm gonna Co see see like nearly like this view this is a view that we're gonna coat on so below me here like on the if he watched the last screen there was like a space for me and an atom where like where I am there's a lot was a little Twitter icon and my alias and then below that was Adam and his Twitter areas and below that was sponsor and right now I'm generating those with sketch which is a pain in the ass to do every time so I want to create like a little little CSS 3d thing do this web-based so that I can dynamically update that content preferably from some some kind of database source eventually that's what I'm gonna do today I think I have if we take a look at this thing this is how it's gonna look see like so this mmm-hmm this area here on the right the con there this is like the main area where like this this screen is gonna be and then here are like a placeholder for the guests and all the hosts and then here you see here that this changes so you see like this is what I'm gonna do today it it's gonna change like this see see here that failing see other programming and then it changes like recorded live edited version and this is gonna show like the YouTube the YouTube video is posted on on Fridays and the show was recorded on Monday mornings like we see here so what I want to show like this this schedule here it's not gonna rotate this fast this rotates every second which is super annoying but we're gonna have it look every 10 seconds but I'm just using it here for like effect and I want to add like a nice transition animation to that so that's what about it and I think we're gonna use probably if you look at like please suggest New York Roma asked how is five it's like seven seventeen Monday morning huh you know near Cromer there's this cool thing called time zones it's Monday morning for people in on Pacific time I had to pick some Monday morning and they happen to be like the biggest individual group huronian Wow sassy mpj sorry it's Nia Grover that was there with me I think it's like I guess it felt like being sassy today Oh real late sit real light says later all I have to start my work session goodbye see you next time VK aide of me says what if there are two guests than you yeah that's a good question like the thing is like that is another creature question another reason why I want to make this web-based and dynamic because I want this to like be able to easily configure this depending on what what we do maybe we will have three guests should be so cool it's so complicated this show is so technically complicated as it is but yeah that's that's we're gonna do and yeah if we have to read yes we'll just remove this sponsor party yes or perhaps like the like I don't know make some three thing or like push the sponsor down down to like this this lower area here or something I don't know really think can I do just that's miles per se work here I think that I have this software called Mouse per se that there can you see this like perhaps we will push it out here but or push it down like it's some kind of reactive fashion it's uh no no really we'll see we'll see yeah but for now I'm just gonna like the first thing that I'm gonna do is that I want to tidy make this a little bit prettier you know I would like it it's not it's not nice it's this font is too big and I want to have it like an icon icon okay so let's let's just jump into the code and see what we have ah sue sue sue sue sue sue maybe I can this since I actually do have a lot of extra space here perhaps I can put but this is here this is way too little space but okay can i this no it has to be specifically 25 big oh no I'm showing you the get the dashboard hope I didn't show all right huh would have been bad if I show the stream key here scary okay so what I want to do yes to make this a little bit prettier so we have these panels here and I want to make do a little bit what let me see okay this figure here there I hope like if if this refreshes will it jump to the no good I want to first make this font a little bit smaller so they let's do that don't the CSS hmm and these are called panels in folks we're gonna just call them in fold panels yeah any questions like your in the stream and stuff just just post them in the chat you can also write little I think that hopefully this works if you want to like comment on a specific line like 9:30 and this line sucks then like it will appear here and in my chat pretty cool so you can like make these comments exercise restraint when doing it but if you have specific comments about like code then then you can use that [Music] a little italy so font size and we're gonna do that if i do just one rep oh that's too small 1.5 m that's better that's better and I want a youtube I can next to this when when it's YouTube and a twitch I can next to the and next to which so in order to do that I'm not I need to go and this I have fun awesome I can installed when I see if we have twitch year I don't want pro no YouTube there we go and this is just I do this this is work copied and we go back to the app J ascesis just gonna shove this in here see what happens okay cool that's progress we're gonna do the same for twitch please exists yes copied get in there and now we have a twitch icon and the YouTube icon and and it would also be nice if that was a twitch caller so let's go for like twitch brand collar there we go that's the twitch collar so we jump whoops I'm sorry for scrolling so much yeah back to the CSS and go info and fab yes then we do color like that see what that does yeah that's cool but now both of them get that color which sucks so we want the f8 which a twitch who also know that twitch I can yes as is is switch icon eyes equipped rich color it's honestly a bit annoying because it's it doesn't really mesh with the black here so we might have to do something about that but for now like yes let's find their YouTube red color oh sorry about that bitter a residual cold YouTube brand collar that's the one Thank You Tube I suppose color and that's the thing and let's see where we go how is it yep it's YouTube color and I also want like the Earl here rule here to go red people are annoyed with me saying I also say boob all right so I kind of like now I have like these that are specific to the the twitch thing but I want to like instead use the parent dev you know like one of my cues of this class name here so it's like that panels got twitch and then the fab I do like pencil which then the fab guitar this would work thing yeah it stays stays like it should HTM Lopez says mpj my wife asked if you were throwing up SMT or what do you think about CSS preprocessors what what exactly do you mean by that I mean by now like CSS is always pre persisted in some way this is probably like when I compile this to the bill they will probably do it to some garble I do you mean like SAS or stuff and I also want this to look like today to thee yes good replace earlier and there's Kirsty well well look at that look at that this might be better off with a white background later I'll see I'm just gonna change like that rotation here to something more sane because it's super annoying enough six six thousand seconds Smt like like yeah like SAS less I think that they had like they were more appropriate before now CSS has so many nice like CSS variables now they're like functions you can repeat things it's so much better if we can converge around CSS now honestly it's it's a better it's better idea because then we can share knowledge within the team and if everybody else goes away and learns like SAS and scissors and less and like it's if we got some mess it's better that we converge now honestly yeah let's look if we can do this a little bit into a do a great let's see we're gonna call this so this is a panel here call this close name icon deep deep deep deep and then we're gonna call this other part here I call this like the container of the text not the best names maybe and so now and we have to do the same for this one or things are gonna be really messy and I see that right now I need to turn these into components type the note is that we might not get to class animations because I'm spending too much time and laying out this I'm sorry if we fail with that but that's the nature of coding something thing takes day CIM says miss the setup idea is use effect starts an interval which will set state and that is safe because use effect has empty empty array as dependencies and would therefore only run on mount ah yeah let me explain this while we're at it I get rid of this so yeah use effect here when you run this is react hooks when you do react hooks and just add like the second argument here as the dependencies that this effect depends on so this will rerun whenever like something that it depends on changes so you're supposed to shove in different state variables here for instance this here could be a shove into this and then use effect will rerun every time one of these changes and if you pass it nothing it will it will only run on one change so this is effectively effectively on a replacement for component did mount I hope I explained that correctly because ISA taught me this basically this weekend so I'm not sure if I completely got it completely right but yeah I think that that is the gist of it and when you do ok so let's see now I want to I want to get like this little icon that the digit to do the little fab YouTube thing here and have that get to the left of these things so I'm gonna jump to the little surface cool and so much and actually I think I'm gonna split this device so hard to see let's have a look at this so that the panels info dot panels doctor dear that's nuts disgusting I'm gonna call this panel panel start overly aggressive selectors probably come slow somebody wheel would probably used to say that this is not a good way to do it I don't know Jericho says 1:30 a.m. I must get to sleep would work tomorrow and joy the rest of his dream all until next Monday morning goodbye having us having a good good night's sleep so nice to meet you alright alright alright let's see how do you do this I want grid template rows here now columns and I want like one fraction and nine fractions perhaps so this is sort of like present oh and I also needed to go display grid or the template columns won't do anything oh yeah hey does that look nice that's what I want and I also want like place items Center Center that's pretty cool but perhaps like left said to work yeah that's sort of what I wanted yeah doesn't look as good as I wanted to perhaps it's because the the fab is too small can I change the font size of it one rim happens if I do that it turns super tight like two hmm what do you think like I don't know I don't know hmm PKA dot me be responsible and clear the intervals for God's sake please uh we're like a component did not mount like exactly how would you how do you do that in react hooks I actually don't know actually don't know SM steals s just make the I can match two lines in height yeah that's a good idea so it's actually like I want this thing info dot panel fab I don't want that to be like rm2 now on size to REM does that look like wow three room that's close what firing is that you baby now that's that looks right and this also becomes a little bit we need to change this to two eight perhaps now that was too much and at one point hmm yeah yeah ah good enough good enough maybe no it's 7.5 it's a little bit annoying because oh well no it looks pretty good right it would also be nice to have a little bit of space after failing together but if I do that we'll never get to animation so let's let's have a look at animation does anybody in chat know how the heck to do CSS CSS animations please do a suggestion and I don't want to do something here like that goes fast they're dead the bug thank you for following welcome to your show so I'm gonna do like reacts react animation and when you do react search for this you the first thing yes react transition group and this seems to have been moved to react transition group crackage that has maintained by the community now one dot X branch has completely API compatible with existing atoms should one use this is this what people use noise please write in the chat while I do that I mean world while you do that I'm gonna see if we can have the clear interval thing hmm so they come suggests this it's gonna paste this in see what's he dead okay so you return a function that does the clearinterval ID so the function that you return here that will be called when the component is unmounted is it correct this yeah me too not like that okay cool yeah yeah got it the thing wait like react hooks are cool but it's like a happy ISO obscure like it just like there's no way of understanding what this is without knowing them but I guess that they're simple enough to learn cloud Walker it will tear down the effect on unmount yeah so I guess that you could make this a lot more clear by you doing this function teardown so this would make it like more obvious to somebody not familiar with react hooks but also very verbose which of course like one of the things that is very nice about react hooks is that it's so some credible chairs cloud workers as I use keyframes for simple animations but dragon spring for more complex animations hmm yeah I want something with react support here somebody said react spring what's right let's react spring right like spring admission blood blue blue blue spring from first simpler mission and I develop code from capacity to market okay yeah cloud Walker says react spring is pretty cool and it recently comes with hook support okay let's let's do this we're gonna use spring we're gonna use string it's been it's been wrecked spring bring your components to life with simple spring animation primitives get started introduction blah blah blah blah blah blah it's a spring physics basic animation library oh so it's like spring spinning no I like this NPM install react spring let's do this great integrated terminal and the EM install react spring while it's doing that for Plan B oh it supports platform web web react native reg name we're practically oh yes yes Wow wow it's so good it's smooth my Springs are not duration it's probably good the number of obsess things okay we we are sold man like we don't need no you can give it Bitcoin it's good bit King yeah but how do I start it's giving me pasty things oh all right mmm the easiest basically five hooks in react spring gently use the spring it's a single spring removes data from A to B okay these is view spring hmm okay animated dear Wow well it's just I'm just gonna try to piss this in and try to figure out how to help to do this okay so we have that now perhaps I have to restart this too first you fetch your imports yeah that's cool next you define your spring use spring okay let's do that I'm gonna close the CSS here and this was just okay look at the top here like we is gonna call it props oops okay what this is mysterious okay so this is gonna look like your passive props here perhaps you should actually read this first you fetch your imports you need the animation primitive itself and a special factory called animated this library animates outside react for performance reasons your view has to know how to handle the animated props you pass to it this is what animated is therefore it extends native elements to receive animated values so they have animated here and this is like a special component then like it's an animated div and pass style and then that password fades in ronan says like read the docs what is this c++ yeah java developers docks of java developers alright cool and then we define our spring oak and crease the font size a little bit here for the benefit of you people that are watching from mobile by the way gave Getty C loom has been berry followed welcome to to the show okay so a spring simply animates values from one state to another updates are accumulative Springs remember all the values you ever pass you can use arbitrary names there are a couple of reserved keywords like from for base values you can learn about the API here the received probes are not static values these props are self updating cannot use them in regular devs and such okay okay finally tie the animated values to your view and then you use this animated dev here we pass in props that was from here and then this will magical favorite Faden hmm in the view part of your component you will simply wire these props in make sure to extend the native elements you want to animate using animated if your target is the web then animated contains all valid HTML elements dev spans SVG's etc you want to animate react components like style components or elements on other platforms and do this okay hmm all right all right hmm okay do not think of the values you pass a stylus per se although you can use them at such do with them whatever you like animate attributes for instance cloud Walker says that the props name in the docs is not a good one in my opinion you can use what you want by the way yeah I figured that because the props was like that made me think of old react api's of the or the API of functional components it's a little bit weird ok this is seems interesting but I think it's a little bit distracting let's let's get going instead I'm gonna try to do like an animated dev here let's see like dev dot animated so we want these to be animated animated unabated and we also want this year and this year should really make this into a component but you know expected correspondent closing tag mi there is a corresponding closing time sorry what you know what is happening here I might crazy say this Dave is closing here disclosing here this Dave's closing here yeah no I need some I made some horrible mistake here what is [ __ ] [ __ ] no this I got bad because now I it's something that I forgetting to close somewhere or goddamnit this is there a deep missing here dip no stop god this is so annoying just try randomly moving things okay Sarah I forgetting teeth oh this is worst worst it has a closing tag Oh bad yes like this right here I'm gonna open and close the file and hope it fixes itself it doesn't he gums worse comes worse it becomes worse all right so we have to go through this figure this out oh you put an animator but it's animated octave yeah but now like I have some other problem that is nice see if I can close this does that save me no it doesn't dream yes paste it somewhere else or no let's figure out where I'm so this is a closing I this is a closing tag this is a closing tag no something is better this why isn't this closing this is not closing do you sidebar this is maddening afternoons you can minimize each dev until you find the wrong path that's a good idea that's a good idea Robin see here I can't make [ __ ] let's go there hey you know what before I get into this I'm just gonna paste copy the entire thing here there we have it and then I'll start removing things until I figure out where the problem is so that was not the issue and I like remove this info thing here nope move this here nope move this here nope move these what no no look at this so it's what is this this is a lie it has a closing tag look it lies it is a lie what is this even where does this hero come from it's from typescript I don't even use typescript and it still did you add a semicolon after the new import what well it's try come on shift P and reload window oh my god oh ma ok if somewhat like this is why the top script type skipped this is how typescript wastes time God God like I just spent like yes I don't even use typescript and still like it wastes my time God piece of dammit alright and p.m. start Thank You plug Walker you're amazing god damn it Titus krimpets Oh God ah so hateful get back into the game here and we're gonna try this again animated for typescript went into our animator dip animated dip yeah yeah make the dog dev and he makes it dip cool right so now well doesn't animate yeah so and we have props here but we don't use them you need to pass them into these animated dev right so it's style and they are supposed to get these props I think perhaps see what happens nothing happens yet okay let's just look at that and at the docks okay this Guildenstern so it's all good I'm sure that the most valuable lessons are learned through pain and suffering yeah that's for sure and then typescript will give you a lots of lessons this is uh what did it work it happened just reload the page like oh dear oh it happened on oh it happens on reload it happens on reload yeah it slowly fades in hang on so let's first of all let's slow that down duration duration 500 yeah okay not work so it's a simple animation on mount so now then how do i how do I get it to actually switch like when being and not mounting but like when it's being drawn so to speak how do I do that use transition can we do that toggle between components cloud Walker just use a condition on the config of use spring okay okay oh so you mean like I don't quite get it website because okay so this is gonna go from to opacity one from opacity zero okay so if the car okay so if your we are in a state where we hide the currents where we should be hiding the current panel then I should be switching like the opacity around basically that's the way I'm Shepard your yeah yeah yeah okay so so let's call we're gonna do the new one here called call icons hide panel and that's gonna we're gonna use spring think this API is pretty cool going to declare this API cool so we're gonna call its opacity 0 and we're gonna do duration 500 and it goes from pass it you want what is this expected to something yeah yeah so I'm gonna do like alright so this little tricky because I remove these from view I'm gonna just keep these both of these in view for now instead I'm gonna use this info panel index that I have so both of them you're now gonna show and I'm gonna do like I'm gonna make use of this here and then I do like this the info panel index is showing otherwise I'm going to use what did I call them again hide panel something like that might be this thing here otherwise hi panel well this work I think it works come on well kind of sorta did so it's kind of like Heights one yeah what is happening here why is doing this so in the start yeah so they don't kind of retrouver trigger okay this is consul there it's considered invalid don't property class cost me forty three oh yeah okay get rid of this error why are we not using a conditional to render one or the other like I used to do that a Aronian I used to do that before but the problem with that is that but they need the dev needs to be in place to actually hide by love their thing it's okay so cloud Walker says that this spring is one way when you finish it you can't return back that's why you need to do use spring opacity condition 0-1 to reset the spring calculation yeah but that's what I do here don't I like yeah because it's what is it like do I have to like reuse this thing but the thing is like I don't think I understand really okay consider to get rid of from okay so let's get rid of from because I might help me think better so what do we have here so like on the refresh you see like this now like the from wait what's something oh oh hang on that did that make it work I'll change this to a little bit faster no like the animation doesn't really happen but but you only need the props not the hi panel it's another like Bell says there's another error in the console that's just this class name don't know don't matter but let's fix them so distracting yeah there we go the psalmist says you only need the props not the hide panel and cloud workers says the height panel will always be zero Hartman will always be zero interesting use it okay they come says gotta go good luck yeah thanks okay so user conditional is in the definition of props variable or alright right but like I'm I'm using the props on to how would it like know which one to hide in which one to watch want to show like because the conditional is different on the two like we want one to hide and want to show so like it's it's definitely the end result is correct actually like it does exactly what is you could do the reverse conditional on the hide panel well like I'm doing the conditional here like it's getting the like let's just do this I'm going to call this props show panel there we go there go the calculation of the spring but it's not the same you need to the calculation of the spring is handled by the use spring hook Claire Walker says that why you need to do what Walker says I need to do something like this but this is essentially what I do which is that I use another spring because I need one spring for each dip you spring notices the config changes okay so I need to like so need to have like the there's like some state inside of each spring so instead of like thinking like this I perhaps I should be thinking ass just which twitch spring or YouTube spring I think that this is and then we're gonna clean this up a little bit later now we won't really won't have time but so this given like like me I'm gonna copy this stuff here so this is if it's I'm gonna copy this I'm gonna call this YouTube come on complete this for me oh it won't 1 0 now this is gonna be one there we go and we're gonna do the same here but it's gonna be to YouTube spring I have like the style is gonna be here and then it's gonna be like YouTube spring see if this works come on yes yes victory Thank You cloud Walker for being so patient patient with me ah God that was us okay but then that makes a lot of sense actually then makes a lot of sense can I can i inline these I should be able to enlighten these to think yeah what's in like that and see if that works not pretty but I want to see if it's possible yeah that worked Lulu says this feels like baking a pizza with a space rocket love it do to do Robert Abel says nailed it yes impale says clap Kedah sees annoys the literal the literal conditions its origins that's nice one Oh feels so good feels so good we now have the at least these these animations and we learned a little bit of spring I I really nice cloud Walker says I'm not sure if it's a good idea to inline it because hooks needs to be unconditional yeah but aren't they unconditional though like doesn't matter like if I have them late in the render or up in the render prototypal says my love for hooks is unconditional the psalmist says you're lucky here that they are unconditional well later or effector could met Messi I would say that this device hook specs practices oh yeah I get what you mean like if like if later for instance like there was some kind of thing that wrapped use the spring here that would mess things up so that is why it's it's better to have them treat like stuff like this let sort of exactly the same way as things that you stay but that should be on top and use effect on the top yeah makes a lot of sense actually yeah cloud Walker says if you had a condition in the ASX you will forget the hook use yeah thanks a lot of sense yeah so I guess the next thing I need to do on my spare time and all Stream is to make this a little bit more general or something but I like spring it's a nice API and I'm for sure will use this I like this thank you so much for watching if you're interested in learning about computer science fundamentals you should check out our sponsor brilliant at brilliant rhetoric / FFF we record this show live on Mondays you can find out when that is in your time zone at twitch.tv slash fun fun function you can also hit follow there to get a notification in the twitch app when we go live if you want to see past recordings and get a feel for what this channel is about you can check out this playlist and if that pleases you you can hit here to subscribe until next Monday morning thank you