Let's Learn Framer Motion! (with Matt Perry) — Learn With Jason

hello everyone and welcome to another episode of learn with Jason today on the show we are joined by Matt Perry Matt thank you so much for joining can you hear me okay now sigh yeah ugh good stuff I had to serve you again which was an impressing confusing yeah the delay is the delay is definitely rough but yeah so Matt welcome to the show thank you for thank you for joining us yeah nice to add my question thanks for having me on yeah so for those of us who aren't familiar with your work do you mind giving us a little bit of an overview of kind of who you are what you're into all that good stuff yeah so basically I've been writing animation libraries for probably too long I started with pop motion which is my first is more of like a low-level functional animation library for like people who really want to get stuck into the details it has no opinions and you can still use its days it's still right and then I really suppose which is really good right no no wait wait at all this right dogs come from Locanda sage so this is the the Corgi storm the the chat gets a little unruly everybody's very excited about this episode I think animation is one of those things that I think everybody really struggles with right and so the opportunity to see someone who is as proficient in animation as you are actually walk us through how we can start doing it ourselves has has stirred up a lot of excitement and the chat is expressing that via Cordy yeah maybe I should have made that the example today I thought oh hey we got all sorts of folks in here Lillian Lilly Toni lucky number Slevin what's up yeah everybody's here okay so sorry we we interrupted you as you were as you were introducing yourself chat behave yourselves I know JJ I haven't even gone apparently how many even goats which account let me yes let me fix so yeah save it so poses I would say how it's a four bit okay yes I posted the first react integration that I did and that was people preferred that shall we say see pop motion because it made things simpler which is a lesson for me and then I joined framer specifically to write an animation library the designers would be happy using and yeah and that's resolved in what I considered like quite a simple API again probably simple in many respects impose but it can do a lot more as well quite similar bundle size absolutely cool so yeah I think like I one of the things that I think is really exciting about this is is that like when you do animations and react it's it's challenging on a lot of levels like it's it's challenging because you have to understand animation in general they're there all these concepts that you start to see you know you do your first your first google search for animation and people are gonna say things like key frames or tweening or transitions and it easing and you start hearing these words it's like okay I've never heard these words before I don't know what they mean I'm not sure what to make of this then so that's like level one animation then you've got level two which is like react is not really built as an animation library it's it's very reactive and and things happen instantly so you're not just like oh react doing animation you have to like do some stuff that gets react to delay updating until the animation is finished so that it doesn't instantly pop from one state to the other and there's all this like extra thinking that you've got to do so so this is what you've been working on with frame or motion right is like how how to make this a little more approachable a little less intimidating right yeah exactly and luck it will be spent like the in the opposite extreme where it was like so simple that those maps and things you can't do where it's a frame of motion we're trying to like get a good balance between those two yeah but he did just remind me of the reason why I even made post in the first place and that was as you say and I was working with someone and she she asked me what is a tween and to me like tween was like dekakin from like way back in the day ActionScript green sock was like my first animation library so and you know flash cream is the fundamental concepts of yeah a to be animations and I just couldn't it really showed me how much I'd taken it for granted perhaps that between you know that is a barrier and keyframes that's a barrier mm-hmm so with frame emotion the whole gist of it is you just tell it that you want to animate and what you want to animate and it will do it and you don't have to worry about it it's gonna be a snappy animation for X&Y he's just like a bit of spring and for the capacities between you can go in and edit all that but the the idea is that at the very first grunts like it's as simple as you want it to be mm-hmm yeah well that's also in thank you so much for the subscriptions detainee and and pillow really appreciate that and so with that Matt I think like especially with something like like animation it's so much easier to show than tell because there's so much conceptual stuff right so maybe maybe it would make sense to just jump right in and start start playing with something what do you think yeah I needs to do that more than anything but cocaine to the chat yet how about I I find these faster it's too too easy to guess which is terrifying really because that's the password I used but almost everything great bastard nailed it and it took me three attempts let's try this yeah so the first thing that I'll probably show you is if I can can I take over this stream for a second oh yeah if you want to take over let's let's do that let me give you control you should be able to share now so if ions oom just suggests great is that yeah exactly cool oops no the screen I think that any professional alike sailor every guy I can't bring him all right I think this is this is wreaking havoc on my on my like hacky layout that shows your face on the the stream but we're gonna we're gonna do our best to make this work um I see if I can in video make you big again and then pull this over here there we go alright we're now God stop helping about that perfect alright we're back in business so we're sharing your screen and I have not lost your video come on little computer brilliance so okay so what you're looking at is is the the blank framer project and this is the web beats s so this is something that we'll all be able to use soon I think with a chapbook is awesome I'm actually gonna I'm gonna stop you before you dump jump in because I this is actually the first time I've ever looked at framer so do you can you give like a really quick maybe the elevator pitch for what framer is yeah for sure it's a probably so I can sit tall so you can take slack you can take framer oh sorry figment designs you can make new designs from scratch you do more than framer and then you can make them interactive so you can present like an app or a website on an actual device to someone you know stakeholder or you know you're doing a picture company or within your company and you can have people play around with it and you can any animations that you design in in framer you can then go to the handoff panel and copy and paste the transitions that you've actually created okay so that's you and you can put them straight into frame elation so you can also go from prototype straight into into production so I'll show you this is a this is sort of like a release feature but this is the magic motion stuff there I want to talk about today yeah and we'll go what what I'll do I'll show you something that you might receive as a developer and where normally your heart might sink a little bit and then we'll go through and have a look at how we might implement that using the latest frame emotion - it's currently in beta but it will be coming out soon Niki to answer your question yes this is framer is what got the whole internet hyped because it worked with react yeah that's right yeah and increasingly it exports some code but those capabilities are increasing so they're not 100% yet but they're definitely getting better and better so say I've got this device we've got a preview up here and this is my my editor okay we can we can copy this and then draw a box here make it read and perhaps give it some it's border-radius like that okay so this is going to be our button probably not you can tell that I'm not the designer I'm not going to be the person giving a developer this prototype and then if we go into the second screen if we copy this over we can just like change it up somehow maybe maybe it turns into a solid panel I'm clearly a quite adventurous designer not an employable on but and we might want to make it well maybe tailor okay so what we can do now with frame it is link with this some little lightning icon yeah we can connect this to another frame and we get this automatic interaction on tap so if I click on this will animate from one to the other and likewise we can click on can you show that again just a it happened very earth it was a quick one so actually what I can do is go into the transition editor and we can go in and edit all sorts of properties we can change the you know spring and how long that will take or we can go in and make a time-based animation so we'll go in and change that one but it will just make it like a second so you can really see what's going on when I perfect button and as I said before you can also go in to the hand-off panel and the the settings that I just created are there for us to copy-paste ratings who are guess who are actual production code so if I click on this this will now morph basically from one to the other it's a and and likewise you can you can go back to previous and now we've got like a prototype then we'll go from one to the other so if someone was to give us that as developers I mean the whole morphing things like a little crazy but you know this is all on one screen you can probably say oh I want to animate it you know this many pixels but when you're animating width and height it can slow up the animation so you want to do transforms at this point you're probably thinking about the flip technique which I don't know if you've covered on the show but it replaces sort of layout these things with transforms which is super quickly also expensive transforms are quick so you might you might think that this is a relatively simple thing to do but then you get into you know maybe the designers I had I I don't know that anybody except you right now is thinking that that's relative if that's true that's that's okay good cuz you're working again that's it will show it will show that as well this is gonna get a little crazy because then it might be that the designers put this button inside this component but that component doesn't exist over here so do you between between those screens but you know this transition thing is handling it quite well and then you think well I cable the button you know probably want a label on it so click me because I'm also a UX expert nailed it now yeah thanks so we have that there and maybe we won't exercise to the go but then what he wants is for that to automatically become the header of the following screen as well okay and actually on the other screen he wants it to be maybe 48 maybe not 48 maybe wants it be 36 that's a little sobra so now this is trouble because we're doing all sorts of things like we're animating font size and width and we animate between hierarchies and actually when you click it and it works that you're a developer you know you know you this is where the pit of your stomach feeling starts to grow okay so I I just have like a now I just have framer questions is it only because you copy pasted that text from one frame to the other that it knew to interlink those or does it is it just smart enough to know that like if there's one piece of text on this mock-up and one piece of text on this one it should animate between the two yeah it's not that clever but it's pretty cool it's like it keeps track of these sorts of relationships okay yeah Adam at frame has spent a long time like making a bunch of logic that I don't really understand but it keeps a pretty robust mapping of different screens and how they all relate to each other got it okay yeah but yeah so that's basically that's has advanced as as things get really because when we animate between these two things this click me text is within a component that is changing scale but it doesn't look like it's checking it's being warped or stretched it looks like it's the same bit of text right here someplace screens and yeah well I'll walk you through well actually while I'm here I can I can show you the the gist of that problem and this might illustrate the flip stuff that I'm talking about a little better okay if there's a question in the chat that we might be covering later but I'm gonna ask it before it gets off screen David asks how do you choreograph the magic move so like if you want different pieces to move at different rates or stagger them or sequence them is that is that all possible and what we're doing today and so of yeah well magic may visit a teapot so every component as well see like can have a different transition okay thing transition prop so within a stack you can do that when it gets trickier at the moment I've sort of imposed like an API restriction there and I'll again I'll go through this little later the component that does this but is when you get to shared element transitions that currently you can only use a single transition for everything within the stacks you can't do staggers at the moment but this isn't a technical limitation it's more of an API one I know I might touch on why this is a little later on okay they decide just to show you that without any of this correction this is the kind of thing that happens the width and height of a component would be we'd animate from one to the other quite nicely but you can see the border radius which is the same as 50 pixels here and it's 50 pixels here but because we're squishing the big ones down and stretching it up again that the child gets distorted throughout the animation and whereas we you know we don't want any of this we want it to we want it to where do we want the circle to stay the same size we want the shadow to look the same way throughout the transition and this is what these new this is what it should look like basically and that's what we're going to show you how to achieve okay perfect now clear I can yeah so that's all I wanted to show on my screen so I can I can I can find zoom again I can stop sharing okay so let's get this over here maybe I can then I'll share back what we needed here okay let me get you back on screen perfect alright so now I have an empty browser window and I'm I'm ready what it and that's all the information I have yeah that's all the information you need let's have a look so we're gonna start with the sum well the first thing I should say if anyone's got any questions or wants to say more about this you can go to frame accom forward slash motion and all of the documentation says so you can look up the api look up some examples there's not so many examples about this new the new stuff that i'm going to show you now because it's only in the beta but that will all come ok yeah so let's have a look so the first demo that I'll show you I'll send you this link I'll send it to everyone in slack actually because this is something we can kind of all do together yeah so nice slack that would be a quite private but if I send you this this link this Sam oh so we would need to add code yes was word ok so here is this one here yeah the bottom one okay cool so as you can see we just got a switch that I've designed if you go into the style.css on the left hand side in their file browser you can see they're all that I'm really doing is when the switch gets in on and enough casts it will change the justify content of the switch mm-hmm Kluber so yeah so you can't animate layout in well then you know CSS so you the only thing we'd be able to do here perhaps to make it left and right is to change the the calculator left or the X or something you know and use a CSS transition but really what would be better is this it's like you just want this to animate you've you've laid out how you want to lay it out yeah you know this is response if you don't want to have to use Cal Core any funny stuff this is just no it's layout this is the way you should be laying it out so if you go back to okay yes okay we can what we can do is just by importing if we import motion from frame emotion and that's a import curly quite and we've already got it yes oh so all these Sun boxes have already been they've all got very motion installed what if it oh yeah so it's actually lowercase M okay motion yeah that's it and and then to if you use the first div there if you convert that from a motion from a div to a motioned octave okay then nothing will change is still a regular div okay but what you can do now is add the animate prop to just before class name I guess is as good a place as any like that just like that yeah exactly okay it's doing some stuff look at the the color fades now that's cool right exactly so right now we're automatically animate in background color because it's detected there in your CSS we've changed background color so you can animate that mm-hmm and the nice thing about that is it doesn't matter how you've done it it doesn't matter if it's if you've done it on your style components or the style tag it's it's gonna animate you know it's no matter how you define those two different states which means that you can also like if you've done stuff this responsive perhaps so responsive or uses let's see the accessibility media queries nice and this will change you know depending on that situation basically so so to to rephrase that and make sure I understand it correctly if I if I'm let's say I'm doing this and I and it's more like visually upsetting like it like flies across or something and I I set my own on fish in the upset Incas thing you know but so if if we have if we have something that is is like potentially like a problem for somebody with with like motion sickness or something vestibular disorders and I added a video or a support query media query that says like prefers reduce motion to turn off animation you're saying that this would automatically note that and like ignore that stuff actually that is a good point it wouldn't see that we have a hook for that okay I was thinking if you had like a different different design it would actually pick that up for your okay it doesn't carry me and turn off the animation yeah although that is great I do it could detect transition property attached perhaps but it will do like screen sizes and stuff like that using all the helper functions well how have you generate your CSS basically but we can also animate even though that's who we're animating layout rather than you know top or width or anything specifically to say it's moved it's the parent has changed its flexbox if you go in and change the the inner div into motion dot div animate and now if you click the switch no way okay I I mean I I've I've heard this described as magic and I've I've kind of you know made the claim myself that we were gonna learn magic but this this is ridiculous that it was that it was that simple yeah I booked thanks like I'm glad I got that it works for stuff but everybody dough but they yet what I want to get to is an API where you're kind of just signalling intent so you say you know this should animate yeah it doesn't matter that it son has changed layout but you said you wanted to animate so even though this is actually quite complex cuz we're figuring out the difference between two layouts we have performant the animating between them both it will just work you know you said you should animate and you've mentioned performance a couple times here so so what you're saying is like but yeah and I think if you're not familiar with animation they're definitely like more and less performant ways to do animations you can you can do it in such a way that it just it'll set the fans off your laptop will hover off the desk or there are ways you can do it to take advantage of like the the graphics processor and your computer that will that will do things in a way that doesn't make the browser do as much work and so what you're saying is that you like under the hood you are optimizing for the more performant ways of animating these things that's exactly right so we what we've got here is like a layout change which is expensive the browser has to figure out where was somewhere it goes and that's probably the does it so David just dusted question doesn't savor our transform so it might already be on the elements tile it currently does it it will animate from one of those naturally so if you already have that just in CSS it will animate from that transform but it won't incorporate that transform into any future animations but yes so there are things that will trigger layout so if you run them 60 frames a second like width for instance you change width every every every frame that's going to keep trigger and layout and that can really jank up the performance of the animation but here what we've done the flip technique it's definitely something to read in suit but probably take me a little too long to explain here but what we've done is whenever that moves as we saw it move earlier mm-hmm we figure out how far it's moved and then we apply a transform that's the opposite so when we've back visually to where actually began and then we animate that down to two zero and the difference here between magic motion and what we've done in the past which is you know more like this we corrects infinitely deep down the tree so if you stretch or squish a parent the all of the children will know that this is happening and correct so that circle that I showed you earlier that was you know going big and and go small right border radiuses of changing all of that will change that will be corrected for every child that is a motion if animate all the way through the tree that's super cool yeah it means like this is I can already see just the the power that this gives us for things that we that we know we were gonna use right like we we know that we're gonna need to slide open an app drawer or we like we know that when somebody clicks a close button on our modal that it would be cooler if it like moved off screen instead of like popping off screen and so what what this does is this is letting us take binary States of you know if I if I remove these and we just pop back and forth right like this is fine this is absolutely acceptable but by adding a you know by swapping this out this is just like that tiny bit of polish that makes a huge difference I can already see a ton of uses where this is is just like an instant upgrade in the the like style and polish of apps yeah I hope sign like crucially it should be that it's like as close to free as possible in terms of your time and code maintenance as well so all it is is a prop there's only so many things that can go wrong with the problem although I'm like this frequency soon but this I if we change the transition its again it's a prop I'm trying to make it so that it's there's no like try and reduce as far as possible all of the chains of imperative codes or logic at least even if it's declarative logic that can go wrong and just trying to make this as close to just props yeah essentially a couple of components as possible I mean this is yeah this is or I mean I'm already impressed like I feel like this was you know this I'm being able to see how quickly this is this is worth the price of admission but um let's let's take it further what what else can we do I'm using this this library okay so let me take out a different different term I for you okay so the next thing this is I mean really this is the this automatic animation staff motivation this can go as far as she kind of one as I showed you like with all of the correction stuff like it you can do some pretty advanced high performance stuff of it but now if I um I'm going to put another sound box in the chat for everyone it's the one from inventing with monster at the bottom all right cool so I actually clearly I didn't break this quite enough I had a working version and then work backwards but I haven't taken everything out but and are you trying to meet the trade I was trying to swap the layout so that I can oh I just hide this oh no that's what I wanted to discover this that's all that everything was to just show what we're looking at here that's AJ okay so this is cool is there anything else that you want me to to get out of here no so this is just so like a well just explain quickly what okay what we've got here so it's just a list of one two three and four and what we've got is you can see in the Li that we've got a class that gets a pendant or selected if if this is the selected class and if it is the selected selected item it will go big I think with font size in the CSS and likewise we've got this yeah elected with both eyes cool okay so and then in the you've got this underlying things now you can see on the one at the moment there it's like with hundred percent its offset position absolute it's been taken down a few pixels with bottom minus four so there's a view I'm not certain that's like the cool new way of styling things to CSS is probably some CSS grid that I could have chosen to make the same effect but the point is with width 100% it like naturally takes up the complete width of the container list item so in app Jess you can see within the icin component [Music] the other thing that does is ditional II render the that underlined component so if it's selected it literally just takes it out the tree and if it's if it's not selected yes Aaron if it's lit it puts back in so if you go to the list item the first thing we can do is animate the one two three four much in the same way that we just did okay so if you add after well if you change the Airlines a motion Li okay I can spell it motion Li and then exactly not before we can add a transition prop or an additional price sorry no no you get away we can do that yeah why not but yes if that anime no look at that is slick so because all of them have animate they and they all change they will rear end at the same time they no they all animate into their new positions and they use instead of animated font size because they're different sizes they animate using scale instead gotcha scale size would trigger layout but it also looks a bit like you think you want it but it is quite a jittery sort of animation that you get out the other size is like you can kind of see the font jitter there kind of janky you can it you it doesn't feel smooth at all yeah and this of Fury's like it that you can't do sub pixels and it's relay outs in every time there's so many reasons but scale really does a better job of this okay very cool um so this isn't what you wanted me to do though you wanted me to do something else no that was it yeah that was going on but you can I did accidentally say transition I wasn't going to get into this I guess but if you add transition equals and then add an object if you duration : 0.5 and then click around you can see that this animation takes different amount of time you could use anything here you can use spring physics oh and that's not have I broken the transition prop is it maybe because I have the automaton do I need to take it out you know what I could just see could you try refresh in the preview panel for us the yeah the little webpage because sometimes the hot loading no okay what I think's happened oh I know what it is okay so at the top this is what I saw this is probably good that this came up came up as David asked earlier can we define separate animations for every component you can but if they're magic or also basically animating if they live within an animate shared layout component they all currently use the same animation so at the top there on line 10 we've we've got a animate shared layout component mm-hmm now I wanted to so have you put this in yes if you take it out for a sec we can see that the transition will work and that way we can okay so let's yeah let's take this out and well let's pretend that was never even there cuz there I accidentally left that in and that was not that okay and now our now hour duration work so it's nice and nice and slow like horrendously slow okay so let's let's speed that back up there we go yeah that's better that's better so what what we want now though is for this underlying to when it pops out of the tree in one place and reappears in another we've wanted to animate out from that place so to do this we use have you ever heard of sheds element transitions see so if I can explain what you just said back to you to make sure I've got it right you're saying that when I click on one you want this to not disappear but to like shift / yeah exactly so that blue la I want it so that when you click on that that red one automatically knows that oh I need to animate from dis whitson sighs I need to animate from blue and then we'll do that on man and like this is complex because this is this is we're in an ordered list and then we're inside a list item and then we've got this div so you're saying that this div needs to know to look back up to the ordered list and then into a different list item to find the other underlined and then animate between the two essentially okay so that's the gist in it I'm thinking about how I would even start to do that if I was coding it myself and I I think the short answer is I wouldn't I would I would make an excuse about not doing it yeah exactly because what you do is go ok well realistically this is gonna take me you know four or five days of work a lot of headaches and you tell that to a stakeholder or so you're the PM they'll say well don't do it and it's not that crucial that we put that much time into it and as a result it doesn't happen right web gets a little worse and so we're gonna do it in apart from my rambling probably like all that is 30 seconds worth of work this so what we need to do is to reinstate that animate shared layout component [Music] got it okay so now that whenever stuff happens in here animation shed layout can orchestrate it and keep track of the children that are coming in and out of the dumb or the really I guess and so if I understand correctly what this is doing is it's basically saying like this is an explicit declaration that everything inside of this container is connected so of what yeah essentially yeah it's like you say you took on your intent exactly like you are saying these things should all know each other and when one of them changes it's likely that we need to respond to that change in you know what sorts of places so as I said this isn't like beta software so there is a couple things it doesn't do there are you probably won't run into but in my heads like I know you're focusing I know what I've got I think that's the doom of being a software developers we always know the evil that lurks just on the other side of our code right exactly and I I'm sending you into situations where it hopefully isn't gonna happen okay so I've got my I've got my animate shared layout and we've got this animating the way that we want so that then this is no longer gonna work so I should take this out uh yeah yeah and you can move it though too you can move it to animate shed layout you can adjust that stuff okay all right needs to live there basically so now there's our two seconds good but I'm really is so and so a few surface it for debugging though many aside yourself mmm-hmm and there are I should point out it's not just duration that we have family you can use different easing some spring physics forward for now I'm sure so to make this underline transition what we have to do is where we've got class name equals underline on the next line so this is line 22 on the next line type in layouts ID equals underline and then try that wait what this yeah oh you're sorry it's like that tree what was it where someone was saying I'm gonna learn code in this weekend see hashtag single something see hashtag oh [Laughter] yeah look at it go look at that that you know that deserves a corgi parade outside Saucony season I mean good timing chat so that I mean that's that's amazing and that's it like we're so basically okay so I'm gonna reverse engineer this and and you can correct me if I'm wrong so what we've done is we've said all right so we're gonna use motion from frame or motion and we're gonna signify that these elements which are a list item in a div should be animated we do that with this this anime prop and that is what was giving us if I take this out that gives us the the animation here or we're getting the one-two-three-four where these are looking ahead to figure out where they're supposed to be and then doing the reverse transition as you you described to get them from where they are to where they should be yeah yeah and then when we add this animate shared layout and a layout ID what we're saying is look inside this whole ordered list and anything that shares this layout ID should be considered like the air quotes the same right yeah so that when I animate from this one to this one it knows to take the the underline from here and treat it as the starting point for over here exactly yeah and that way so slick I say yeah I see it cuz you like it yeah this is like this is the kind of stuff I always want to do little things like this and I always start trying to code it myself and then I just give up because I'm like you know I'm gonna spend three weeks down this rabbit hole of trying to build these really cool transitions and then I'm gonna change my mind about what I want it to look like in a month and I'm like well that's just not worth it it doesn't have the shelf life but if I can play with these ideas like this and do something really quick and really small that gives me these little interactions you know all of a sudden it's so much more feasible to say all right let's try out let's try a weird effect let's try a cool transition and see what happens super cool just incredibly cool yeah I want it submit it's a very to be liked expressive and fun things because some things are hard so like you're not gonna experiment as much like you say like it's it's it's not just a barrier to implement them in production right it's also you know you might have just an idea that you want for your personal blog you want to do after work like there's a big difference between that's gonna take you you know two nights of work versus 15 minutes or something mm-hmm to the point where you probably just won't bother doing it and that's a shame for all your users cuz you know it could be cool yeah so one of the things that you showed us and there's a question about in the chat is you showed us that like button to modal transition do you wanna can we do that can we like build that transition yeah yeah we can it depends so you'll CSS might be a lot better than mine oh and personally livestream but if you can code up those sea States we can animate between emotion I should be able to do it yeah let's uh let's see so maybe what I can do is I just need to get out from the package.json I can find it I lose it so I just need this framer motion beta and then I can he'll do a code sandbox is that right I'm gonna create a new one create a sandbox go with react and then I'm gonna go into my package JSON and add Ramar motion okay so when I save that it should it you have put it in all right and then my two states are so can I do like two separate components like can I do a like my sidebar is is one component and my button is another and it'll transfer between the two yes so that was actually we might say this demo after but this is cooler what we're doing now say yeah make two in so many different components alright so what I could port react from react and I'm going to I'll just do inline styles to make this fast but we'll do a button and our button is going to return a but let me put it in a div actually so you you would had put this inside of a div that was like we'll go with on a percent and then we'll set a background of let's do powder blue and we'll set padding uh will make it kind of big so like or RM and then inside of that div we're going to have a button and that button is going to say click me and then we're gonna add some style to that so we'll go style we had done a background of red have you done a border radius of I think it was twenty and we will set some padding of like one and then let's set a font size as well and the font size will be like twenty or I think that'll work okay and we'll export default button and let's get that on the screen so I'm gonna import my button and we'll drop this down here okay I'll take that nice yeah not my best words that's a boy oh I know what I'm gonna do to make that it's the box sizing is what broke our horizontal scrolling there we go okay so so now we've got our section here and then I'm gonna add another one call the panel and I'm gonna take my button and copy paste it so that we don't have to do all that boilerplate again call this one panel and this one is going to be uh let's see we'll go position:absolute and you wanted to put that top left and then we'll set a width of we'll say like a e oh whoops 80 vertical width so we can get rid of that one make our background like what was the color that you use we'll just use regular blue I think yeah and then we'll we'll make the padding a little bit less intense and instead of a button we will use a heading so there is some caveats but I want to see this play out and I'll get to the caveats okay yeah and so I'm gonna leave these parts untouched um so that should be okay and then I'm gonna have my import panel from panel I think I might have forgotten to rename it in here ah is that semi okay so I've got my panel and then if I put my panel down here okay that works let me make it full height okay so there is our panel and then we just need to make that toggle so I guess we can do open set open you react that you stayed off and then we can do like this feels like it's probably gross but open will be button or and all that needs to be backwards okay then I need to add a an on click see how fast I can go and then we're just gonna set open to the opposite of open so we will just say how do I want to do this I I guess we can just no that's not gonna work of it can I just hack this that's it is that gonna cap well that bubble you could get it so you can put it on the the app just on the whole app yeah okay I think that's all I did in the prior type and I was second nobody was gonna notice because I was clicking anywhere in the focus so I could choose to think great sigh like we should put it on there yeah so this is like this is kind of junky but it's you know it is what it is like we're not trying to be we're not trying to build it perfectly we're trying to show the transitions yeah and I think that's still missing Isis think about it like it when you do don't stuff like this and you'd like this one's red this one's green and it's obviously disgusting but you really want to see like okay is this working at stripe mmm-hmm yeah so this this is good and like eco I think you were talking about having it like excessively hidden but we're just gonna remove it entirely from the Dom which i think is equivalent that would currently be the only way to do it no that's super interesting and I will look into making that sort of thing happen so mm-hmm hidden yeah we've got confirmation from eco that they're just taken out of the Dom is also accessible so that that's fine I might say okay okay okay so now let's say I've got this today hopefully I'm interested sketch down file I'm pretty sure it works fine okay so what should i what do I do next oh no did you freeze oh no what a cliffhanger Oh Matt don't leave this hanging this is gonna be this is gonna be great because now we will just never know I guess okay so while we wait for Matt to hopefully reconnect I'm going to try did you get back Matt classic Internet okay thanks so everyone in the village know that I'm there and in a live stream Jason come on I was about to just try to hack my way through this I'm really glad you showed up I was sleeping you had obviously when I get back I'm gonna say some crazy stuff okay so so what I was thinking here's here was my my leaning is I was going to get this animate shared layout and wrap this section here and then I was going to put a layout ID on the panel and the button and just see what happened so because the what okay so the see things you kind of want to animate and once the the blue the dark blue thing panel container - the light blue thing which is kind of the button container so I'm gonna give those a unique ID okay then you've got the other thing which is the button to the header so I give those matching ID as well okay so then in that case I would want to actually pull in in here in my individual components and I'm gonna give these like this would be like a motion dot div with a layout ID is that right yeah exactly okay so let me import motion from framer motion and then we'll change this to be a motion adaptive and I'll set this to be a layout ID of we'll call this background and then or no this one actually is not going to be that that's it's gonna be down here because we want the button to animate not the background so well you want both events animate I think cuz didn't I want this to just go away isn't that what we do that one yeah you're right you're right so we've got our motioned up button okay I see two things that are going on they're a little different then and I don't know how without changing this a little bit we're gonna do it so we've got the button and that's kind of like ah so can you put can you put things inside I'm pretty sure you can put tags inside a button is that right text inside yeah so not just expert like so what we want is the button to become so you're right so the the blue container shouldn't have an ID but the text within it textual should have like a header the two header should be matched somehow uh-oh so we need extra text I got you okay so we can do like motion dot span yeah exactly okay and then I would give this like a layout ID of header and then I'll come into my panel and we'll set this as a motion h2 and give it a layout ID of header okay and then in my app I want to import animate shared layout is that right yeah that's right from frame or motion and will animate shared layout animate shared layout holy buckets so that's not perfect but that is a far cry faster than anything I could have done on my own it's pretty it's getting there isn't it it's cozy and we can fix it in relatively little time I hope so so there's two things that we need to change from what I can see so if you change the if you had a transition props you've animate shared layout again and make it duration one just so we can see what's breaking transition and then we're gonna add duration we'll make it extra slow because that way we'll be able to see in there okay so we can we can see already like our text got squishy then that gets pretty bad got weird yeah so and the other thing that's this different from from some framer is that the blue box is just disappearing completely like instantly it doesn't like may have so that might be solvable quite simply there might be a small difference but what will tackle the text first say okay what's happening here is say well I didn't know this until I made this feature but display:inline components or elements re Kaun accepts a CSS transition drop so we're doing all this to transition so if it's not getting applied then it doesn't get corrected or just an animate into the right place so we can change that too yeah okay so we'll go inline-block might need that on the h1 as well shouldn't or maybe they both need to be block or something I think in like college you know what it is so yeah Charlie so what's happening we're animating from bounding box to bounding box so if one of them has like is width 100% but my Center Tech's like the bounding boxes need to match the outline of the text bounding box see what I mean okay they need to be as close to the text as possible so because otherwise if you had like a imagine you had like a splayed block and the texture Center aligned it would measure that text as being as wide as the block knows what is the text so for visually their visual effects we need it to be snaps - so if we do it like this then that should get it the way it stopped helping there we go okay so hey okay so what I just did is I set the header to be in line block because by default block would go full width and so when I set it to inline block it just collapses down so there would be a lot of style needs that we'd have to address in addition to what I just did if we had actual content in here but this at least it like solves that problem so probably what we would want to do is like actually I know what I can do let's do this instead so I'm gonna get my h2 out of here and then I'll just wrap this in a motion dot span and we'll make it display:inline-block motion okay and then this also needs a layout ID right and so now yeah that'll work it does a little bit of weirdness with my let's wait actually let's set the font weight on the button so we'll match our font wait this button button and then I can set the font weight to be bold and now it'll match our stop helping there we go there we go so now our font weights don't jump and we get a nice clean transition and if I move back to abjure yes we can turn down the duration time to something more reasonable there we go Wilson so I don't know what this is gonna work but I think because sometimes you do need to tell you these effects given the likethe marker it generally not haven't run into too much but sometimes but there was still the issue of the blue box disappearing yes so if you wrap it animates shed layout if you give the if you give that component the this is in a PS sorry oh and abjure yeah if you give that a prop cords type equals crossfade like this yeah and they'd show that okay so they're still dispensed so if you then let me say all this down again just to make sure because yeah it pops oh look at that though oh mid-transition interruptions oh my goodness oh yeah hate this until that is beautiful I can just pop it back and forth great work here this is so this is so slick okay sorry I'm done let's let's uh let's go back into the button so I know you know we're standing I think this I think this is gonna be a quick fix but don't quote me on that but um what we need to do is add so Ferriero motion has another component called animate presence and what it does is you know when you unmount a react component you've got like no chance to animate it out mm-hmm because you're you you've removed it already so what anime presents does is you can wrap motion components in them and when they get removed all of the motion components can have an exit prop and you can do stuff like exit equals of pasties zero or something like that and what it will do is it will keep these components around until all of the motion components in each separate child have finished their animations and then they're considered safe to rip so you can have as many of these at a top level component for what we've done with animate shared layout is have it come like work with animate presence so we can have exit transitions and crossfade needs I think this exit transition so if you wrap open so the so after cross type crossfade you make a new yeah wrap that whole block in animate presence I love that auto import is one of my favorite things I think yeah well it's on site of BS code super hack I love to know the money why I say that's a nice doesn't oh yes I think I know what's going on do I is this chick oh yeah say if you K I said I feel like I'm looking into a mirror right now this is like me debunking everything it's a guy no no am i right do I know anything yeah there is one less that we do actually have to change so if you go to the because because this isn't a so yeah of course because this isn't being used in the shed layout and that box is still just a box right so if we go into what is it panel was this one yes and we can actually do as I was saying about the so if you change that div to motioned div I don't know how well this is gonna work with the interrupts or animations but we can give it a shot likewise you need to at the top you need to check so after style if you type in initial equals and then an object and write opacity 0 so this every what this says is that every time you can pay anything in here like X Y whatever and this says like when this component is mountains B this style and then in anime so you can do a new line and then animate equals object and animates like a super versatile prop in frame emotion I haven't really spoken about it much because weird showing off like the new frame emotion 2.0 stuff but this is if you replace a string object with an actual object and it contains a comparative with a pasty one and then on the next line copy/paste initial and change it to exit equals of us t0 okay okay so this may give us the results we want okay so there it gets closer yeah you know what it is and I can show you so you yeah so I'm not say you do any way you can do this is by making these separate so all having them basing so I'd have to if this is almost like I'll have to get back to you on I'm not on the crossfade but I can show you a demo where it this sort of bit has been lined out a little bit because this is pretty close and I can show you like how I've done it what's a quill did yeah I mean in there like there are a bunch of ways that we could solve this to that are you know like we I deliberately made this difficult by nesting a button inside of a div and then trying to to like animate the thing inside of the thing and it's you know we've we've definitely made this hard yes this will be available as video on-demand it's also going to get cross posted to YouTube and it'll be uploaded to learn with Jason dev so you'll be able to get on you'll be to watch this episode and the other previous a hundred-and-something episodes that we've done to the show on learn with Jason Bev okay so so for now I think I mean I'm honestly pretty happy to just kind of let that go if you if you are yeah yeah it's a copy I'll too because they say I think to do this sort of thing you either make it a shared layout component that sort of exists in both places one with opacity zero or you problems you make the button like positioned over the overlay separately [Music] yeah I just I just get rid of the background and now it's perfect flawless beautiful yeah that's the easiest so that's a classic yeah problem solved everyone okay so then was there anything else that you wanted to show off with this I say I will now that we did that because of what we just showed off was actually like pretty much the most advanced stuff that I wanted to show off but pretty insane cool yeah the I'll shut up I'll show you fun the unbroken version because I don't want to give you that I was because this is take silver I'm at a time but this is sort of the final final demo and it's not perfect if I I'll put this in the chat it's the it's the bottom link and so what am I actually work better if you open you know you got the preview window URL oh that no this split squad because yeah perfect so this is the App Store as you might find it on an iPad and we've always done is it's exactly the same elder scrolls broken I do apologize but um we're really looking at the transition between the two states oh that's so cool and this uses this very similar technique as to what you've just done I mean you you really aren't using anything different as you can see there the markup on the Left is you've got your animate shared layout with the type of crossroads which isn't necessary but what crossfade does is normally when you so what this does is when you click on one of the button when you click on one of these overlays mm-hmm and this is fully react reader pouch as well so you can see the URL changing when you click on it you can use browser navigation to go back and forth or but you can see also behind the overlays of the item that was there is actually hidden and then this one animates out oh yeah yeah so at certain resolutions or certain screen widths this text the the sort of sub header is wrapped slightly differently uh-huh so you can actually remove Todd crossfade on this screen size and it'll work fine so the the incoming screen will replace the old one and that will animate out and then when you want to make it back the overlay will animate into the page and then just as the animation finishes they'll get swaps and the oh yeah you had a hassle in here so with the crossfade if you get these sort of janky you can actually go into apps yes and take off crossfade to see so the crossfade is sort of there to mask these moments where the to-and-from might not be perfect so yeah if you take that top it's like crossfade off and try it here now you'll really be able to see like there you see see that yeah it's way it's way more noticeable mm-hmm and what this is also good for is when you're going from it's good for masking like very slightly different things but it's also good for when you're going from completely different things so if you've got like say a plus button and you want to open it out fullscreen and see like a dialog right it's lightly different but if you use crossfades it sort of masks that you're not really sharing any child child elements or anything but you do you just want the plus to swap with the with the dialog screen you can do stuff like that with it that's so cool - that it that it opens up like with the thing and then I can just animate right down the the potential here is like this is it's it's very exciting right like and this is the sort of stuff that like I immediately want to go and update learn with Jason deaf to open the videos and like a URL addressable popover kind of a modal like this as opposed to you know just like snapping the page to the next thing like it it's very like it immediately gets my imagination going and and seeing that the way to do this is you know through a few react elements as opposed to tons and tons of custom code to manage State and animations and transitions it it feels like it's it's not a if I was better at animation I would do this it feels more like okay I can see how to make this happen let's let's play and see what I can get done yeah and that's really like what we're trying to just get to like all of those hard bits it's just sort of completely abstract away and because it's not it's like it feels like a waste of time it's not it can be interesting to fix these things prominently there oh they're in the way of what we want are you eyes to look like so and we're trying to get to like a universal solution for them yeah yeah it's really really cool how did you set up the redirect part I didn't do like how you can leave around yeah like how you can direct navigate to Lake so if I go to F it opens like that how did you do this in I mean I know I understand how it works I'm I'm actually more curious how this works in code sandbox maybe this is a conversation for another time it's it really is just this easy line 25 or something it really is just reacts risa encode sandbox are smart enough to like reroute everything back to this to the like the route when you do that I think it's just because it's running in a knife and the Varia has that full control over the URL anyway and then when you were little sad at the tap it you know it's just that page so that's cool yes you Supriya okay perfect yeah that's that that makes sense well this is amazing and I feel I feel sufficiently like mind blown for the dance kids yeah is there any any like next resources or next steps that you want people to take as they as they like continue down this path um yes so at the moment like I'm mostly I'm gonna just drop it in the chat away because why not plug it both mine so is I know it sounds tough but that's actually where like I pump out most of the demos and really you know show my experimentation with this is still in beta so I'm I'm kind of working through it the other thing is for anyone who was interested in the design aspect that I showed off at the beginning frame accom like I'll keep your eye on that over the next few weeks because it's said that that's gonna be super exciting as well but yeah I think that those are the two things I really say you could again if you want to play around with it you can go to the documentation and it's a bit hard to find but I'll drop these specific links in because these are beta things still so we don't like really push them front and center on the enemy page in animate shared layout this this specific bits for the API so I just showed off okay and I'll just jump and shows oh yeah those are there those are the things you can play around with it now is pretty robust but it is like a sane beta so this is going to be edge cases that people run into I think what I would say is if it works and you've got something working which is likely then it will continue to work but it might be the you come across a use case that we haven't thought of for instance and so we need to know figure out how to get that working yeah that's more likely basically than anything well this is I mean this is super cool I am really excited to go out and play with this maybe we should talk a little bit about performance so you talked about the performance of the animations how big are we like what what is the performance cost of using something like like frame emotion on a site yes the sentence the bank as you saw like the main input was motion the motion component uh-huh and because of the all-in-one API there is a size cost at the moment it's 26 K I believe G 0 unified which is a little bigger than pose was but not by much and then if you import animate said now I know it presents you're looking at like 1/2 a k1 K for each of those so as long as you're as long as you're using like you know take advantage of es modules and the the natural like tree shaking it's going to come with that you're only importing the pieces you actually use so it should theoretically assuming your your bundler is set up properly are you using native es modules you're only gonna take a fraction of the total package size is that correct yeah you are yeah but what I would say is that because I really care about about this and I've shown so architects it in a way they're a lot of that all the functionality is loaded in via components like sub components and a motion component will render like oh this is jakab all this is magic motion this is whatever based on the props that it receives and i want to get to a place because all of this stuff is ultimately it's not for your first pain and so there's only a very limited number of things that we really need to render for that so I'm looking into how we can get the the motion component to render you know very little stuff on load maybe hmm you know a few K basically and then based on what you use we can we can use suspense or some other asynchronous API to dynamically load those extra bits of functionality and then render the memory when we actually have to load it that's going to be the projects after magic motion very cool well Matt thank you so much this is really really exciting stuff really powerful stuff I can't wait to see what people build with this chat if you've got ideas make sure you share them when you build them like play around on code pen play around on code sandbox tag mat when you share it so you can see what you're building with it and stay tuned because we've got a we've got a big week this week we are going to be in addition to Matt we've got Doug coming on tomorrow and Doug and I are gonna work on performance for web video which is gonna be really really fun and then we've got another head bender with on Genevieve a keel she is going to teach us how to do real-time live updated data visualization in the browser using observable I've played with observable for like five minutes it is I don't even know how it works it's it's gonna be a fun episode so definitely check out the schedule and stay tuned because we're gonna raid Matt thank you again really really appreciate you coming on like sign for me I enjoyed it thanks y'all we'll see you next time

Channel: Learn With Jason

Views: 6,998

Keywords: Learn With Jason, ReactJS, React, Framer Motion, Animation

Id: L_pmBi3m5X0

Length: 78min 45sec (4725 seconds)

Published: Tue Apr 21 2020

Reddit Comments

[u/InventingWithMonster]

Jason and me take a look at the new features in Framer Motion 2, like auto-animation and shared layout transitions. It was a lot of fun to film, hopefully its at least a little informative too!