Making the Web Magical using Framer Motion

[Music] [Music] uh hello everyone i hope you are all having a great productive week and i hope today's the tech talk will be up to your expectation inshallah uh that the title of today's tech talk will be magical web with reactant frame and motion where we will see how we can animate all web components and even svg elements in a fluid smooth and easy way the talk will be presented by me after alf katel who's occupying occupying the role of an android developer in project goal lens currently in fasgoro uh i am from algeria for those who don't know i'm freshly computer science and engineer and graduate i have been a gdg and wtm algiers organizer for for over three years and now also a github comes expert for almost two years actually the first in the mean region uh i worked also in several freelance projects i guess that's enough about me so let's talk about let's go with a talk the plan of the day will be we'll cover six main points which are first what is frame emotion a definition of the api we'll be covering why i chose the reasons why i chosen frame for framer motion a brief overview then a quick start uh guide which will help us start using the api uh some examples and finally we'll go with uh as a brief live coding demo i've prepared so what is frame emotion frame emotion is an open source project uh it is in uh the enhanced version of pop motion api for those who know it uh an animation uh api that was you uh that was uh the most used with react until uh recently where uh frame emotion took the lead uh it was uh the api is compatible with the prototype and tool framework since they have the same developers team uh frame of motion is what we call a declarative motion system but what's great about it is that it combines the simplicity of css strange transitions with the power and flexibility of javascript those who try to animate stuff using those two will understand what i am saying or what i'm talking about it looks simple in css it is really complicated to make animation fluid and smooth while it is easier in javascript but it is a bit complicated to understand how to do it so frame emotion took the good of both approaches and provided them ready to go animations and gesture controls which made really easy to create dynamic natural effects and animations i mean i may be biased a bit talking about frame emotion because i really like the the api i personally was seeing animations as a monster with all the complicated stuff i i should add using both javascript or css or the other apis but after trying this api and which and with the great detailed docs they are offering animations look really easy to me now no much to how complicated they were so uh i talked about what is frame emotion and now i'll give some points on some bullet points talking about why i chose frame emotion to use in f in first place so i personally choose chose frame emotion for so many reasons including the fact that animations are natural and extremely extremely intuitive the fact that it is really easy to use especially with its good documentation and of course the fact that it can be used with react since i am a react user and react lover uh so also that is uh that it offers smooth animations based on any css properties you know or don't know it's called css properties it also offers more advanced listeners in addition to the ones built in in react supporting for example however with a listener which is not provided by react uh the top gesture pawn gesture and even drug gesture detection listeners which are more than enough to build great animations uh i shouldn't forget uh that it provides uh and offers some special call properties for svg animations which make it really easy to animate svg elements by element also the fact that the animated states are rendered on server side which prevents flashes and ensures smooth natural animations uh in the contrary for so many uh animation apis over there it does also support styled component for those who like using them and finally the fact that the docs are absolutely great covering almost everything about it and all the available examples everywhere in the web so the community is pretty cool and uh it it is going viral coherently yeah all that and the the fact that it is open source sure was uh take me and pushed me really hard to choose this uh api so moving to the third point which is a brief overview about the api the api has few concepts that we should know and approaches and flows that he follows and we should understand for example uh the approach of making animations in frame of motion is to set the css properties with values on a prop called animate which is pretty easy the api also uh do based on this on the values we add in the animate prop uh automatically generates an animation to to the component which is really smooth and we can control it by overriding uh the transition prop where you can control everything about the animation and even orchestrate it like the way you want also we have gestures and by gestures the ipi means the event listeners both provided by react and the ipi itself like the hover gesture top jester pawn gesture the pawn gesture recognizes when a pointer presses down on a component and moves further than three pixels then it is ended when the pointer is released some of you may say but it is not different about the drug gesture but the api in this case uh agree with you but there is a a simple difference which is the drug gesture follows the rules of the pawn gestures but also applies pointer movement to the x and y axis of the component so when we use the pawn gesture and without with the we don't the api don't uh follow the the exact uh credentials of the the components while using drug gesture it follows each follows the pointer it follows the movement of the element and gives you the x and y axis in each in each position it takes uh the ipi also presents variants which are a powerful approach to animate the entire sub trees of a component so in order to animate let's say a component having several children so in order to animate the entire component we don't need to turn each child to a motion component but all we need is to turn the the current compo the parent element to a motion component and animate it using uh variants which will allow us to control all the children without turning them to motion components and all the work will be done by the ipi which make it really easy for the for developers uh so talking about motion components motion components are the core of the api a component were made for each hm html or svg element all by adding motion dot before the name of the element the component will be a motion component right away uh just there is a note that we should take taking consideration is that we should turn only the the elements we are intending to animate uh because uh turning uh all the elements are not even given give them treatments or given any motion will unpack the performance of uh the web app or the web page but one when we do uh take care of that and turn uh motion turn elements to only the elements we need to animate to motion components it will be pretty smooth and pretty performant motion values in the other hand are the responsible of tracking the state and velocity of animating values outside the free exchange or left side outside of react render life cycle they are the secrets behind the smooth animation and the powerful hooks the ip the ipi is providing like you spring use transform and use view port control which will be uh explaining in the demo in a riser bit the ipi also simplified the scroll based animations using the use viewports control hook something that we'll see in the demo inshallah right away now that we covered the some of the concepts and approaches the ipi uh have let's start with let's start with a quick guide uh for installing using the api it is like any other package the the the install process is really easy using yarn or npm just uh write in a command uh like uh yarn odd for framer motion or npm install frame and motion then import the frame import the component from frame of motion for example uh imports motion from emotion in this case we import the the motion components and this allows us to turn each element to a motion component we can also import the different hooks the api is providing and after importing the the the api all we have to do is unleash in our creativity and make an animation as we want so let's check some examples here is the main the landing page of the api showing us the great animations that they've been made made using the api and how smooth they are for example we have here an example that we that allows us to change the css properties and see the animation live scrolling the x axis it will move in a smooth way and when we do it faster the animation takes place as we see uh the the y-axis as well the scale uh the size of the components and the the smoothness of the animation also we can rotate uh the different elements here for example this is uh a bit complicated case than animating then simple animations which takes the cards and turns it to a model using the animated shared layout which is a component provided by the api a pretty recent one actually uh it was released in frame motion 2.0 a month ago i guess once we click on the on the card it it turns to a model directly uh and the animation is pretty fluid adding different different uh elements to to the the component so we can handle it and all is done in a smooth animation made and handled by the api itself without the intervention of the developer we as we can see in the code there is the the several cards in here with the the subtitle and title uh uh compound elements and a div with a layout id and in the animate presence component we can see that it it has used selected id to show it when when clicked because it is here uh using the u-state hook to uh to activate the selected id when it is clicked as we see on the on click on click listener in here said selected by the item id when we know the selected identifier it turns to a model and it handles the animation of the the elements of the subtitle and title all by itself we don't need to add anything else all is handled by the api itself we can see here uh a live demo on uh the the different gestures we can use like the top uh the drag and where what informations it has about each gesture what i like is about the way it handles the the drug for example when i when i uh stop dragging at a certain point it continues the animation to assure the fluidity and the and that the animation is natural and smooth we have also here different examples like uh simple animations using variants here for example that's to control the the subtree elements uh here for example for gestures or while hovering and clicking for here for example is uh handling as vg animations to draw paths and change the opacity it's pretty easy to change the path size and the opacity as we'll see in the demo uh here on the scroll example it handles scroll based animations uh in a in a great way using only the use viewport scroll hook which is pretty easy also here for example we can handle the drawing animate the drug gesture to see more examples we can also check the the documentation the api offers with explanations and examples of code and all so uh for example in here the animation uh is pretty easy to use all you have to do is add in motion dot before the name of the element which is div in this case add in the animate prop and change the scale to two the animation is handled automatically by the ipi uh in in a smooth way we can customize the animation by overwriting the transition prop for example in this example he ch he changed the duration to 0.5 seconds so each time the animation will take 0.5 seconds to finish we can have we can see the example in details when users using sandbox which is provided by the documentation in almost every each example here for example we use the keyframes keyframes uh provide uh how to say it a sequence of animation of the same element for example in this case uh we as we see we change the scale the rotation and the border radius on uh our five sequences first we take the scale as one rotation zero degree and the border radius takes the 20 percent but after that for the scale it changes to 2 2 1 1 while the rotation 0 to 270 degree which provides the score the rotation animation while uh the the radius of the element is changed to 50 which make it look like a circle uh the the loop effect is handled in uh in transition prop it is not shown here in the in the this code portion but it is really easy all you have to do is just specify the repeat type either loop or [Music] ayoyo or something or something like that which is really explained uh pretty much explained in the api in the animation section also with we talked about variants which allow us to control uh the the sub trees of our of animations of a sub tree of an element of a of a component in here for example we had to do all we had to do is to add motion dot for the nav element and keep the items without animations uh we handled uh the variance with an open state given the opacity to setting the opacity to one and the exposition to zero then uh on the closed state opacity to zero and x two minus two hundred percent which allow us when we click the component to open the to open the the the drawer in in a pretty much uh beautiful animation and smooth animation we can see it in detail in sandbox of course gesture animations in here are pretty easy to use for example all you have to do in any component uh of course html that's the that's the there is what's a a bad point in here which is that we can handle the gestures using while however and wild tab for example drug is another case all we have to do is change in the attributes it's good with html elements but with svg elements since they are not they don't have a physical prison presence it is not it doesn't really work uh using while hover all we have to do is to set uh one of the react states and using them to know if they are uh however they're not which which make it a bit complicated using gestures with svg elements but with html elements it's pretty much fluid and smooth or for example in here we change the scale to one point one one while hovering and to zero point nine while tap in which will make it look smaller when we click on it for the drag example we have to do is get an idea for example in this case adding motion dot adding the drag attribute drag constraint to specify for example in this top minus 50 to specify the constraints that we should not uh pass or move or we should respect the the element should respect so in this case the element cannot pass minus 50 pixels in top minus 650 pixels in left 50 pixels in right and 50 pixels on bottom so it is draggable but we can't pass those constraints specified as we saw in a pretty easy way for motion value for example in here which is as we said uh truck which does as we subtract the state and velocity of every animating value it makes the animations really easy uh especially using the use transform hook which takes care uh which in this case for example uh tracks the x which is the motion value that we we set you using use motion value to track the position of the x each time we move it even outside of react's uh renderer's life cycle use transform in this case takes the value of x and put it uh on an interval from minus hundred to zero and from zero to one hundred and then switch for example this case give you the the value of background switches betw between the degree of the three colors set in the the third array for example if we go to minus 100 the color of the background will take the the first color if we go back to the zero the value of the background will take the uh the middle color and if we go to 100 the value of the color will take the the third and between those intervals the value of the color will change in a smooth way handled by the company the api itself for scroll based animations we can't see the viewport this used viewport scroll hook which takes and tracks the the scrolling position and then apply it on the path length attribute here which will make a great uh animation on the the svg which will make the svg which will draw with svg activities as we uh scroll we'll see something similar in the demo in in a bit for the exit animations uh this is a slider using only one component which is motion which is image you're applying the motion dots and putting it in one image presence to uh feel uh the that the to to track the change of the images in the slideshow and all we have to do is change the image in uh using uh simple uh code using javascript uh just change the path of the image and when we set the initial state of the the animation is all handled handled using dimension volume when we do the exit probe for example we'll make the opacity 0 for each image when it is changed uh the animation will return the opacity to one uh when uh for the for the new image it is really cool and really as uh simple uh you should check the the code and open sandbox enough of examples and let me switch the sharing screen okay so i prepared a small demo uh using uh creating a react up using uh react reacts up uh package which is uh easily uh mpx create react a new project then i removed the the animations of the logo the animation of the logo provided in the in the example from css so we can animate it using the the frame of motion api i installed the frame frame of motion using yarn then as we see in here added sampled we'll explain each part and remove and uncomment it to see the impact and even add some tweaks if you want to please be interactive in this section so all we have to do is uh for example before and commenting the code there is no animation in the example uh we all we have to do is import in uh frame the motion component from frame of motion uh go to for example to animate the the image component add in motion dot image then manipulate it use use animate props we can for example in this case using keyframes to animate uh the the image using uh a scale changing the scale and the rotation of the component when we save and we go refresh to the page we can say it it moves in a particular way it change rotation and change scale we cannot be manipulated as we want for example uh if we removed the three first uh the three last cases and we kept only two scenarios we'll see that it rotates and then stops animation we can manipulate the and orchestrate the animation using the transition prop changing whatever we want for example if we wanted to repeat for uh and infinitely we can just add repeat infinity in transition probe and the animation will start animating without stopping we can add a delay between each animation using repeat delay for example which will make its pause for one second before starting uh the animation again uh also we can manipulate loads of attributes like the duration like the the repeat type for example repeat slip i can set it to loop or yoyo which will make it uh animate the return to its uh uh that's a string which make it animate the return to its first uh state before changing there is a lot of uh options to handle and both transition and animate as we said it animates all css attributes you can imagine can make an impact in here after seeing we can also removing or change not using the keyframes for example scale t2 directly without using several scenarios and rotate to 90 degrees 2 is pretty big to the screen so let's keep it 1.5 let's make the duration like one second since it's it looks uh pretty slow the animation takes place and loops as we set it in transition to repeat infinitely we can uh manipulate as we said uh each probe each css probe this in an easy way using either keyframes for dark using direct phones we make fluid uh cool animations in here uh for for example let's handle this time let's see the the gesture uh the gestures is that live example of gestures uh motion turning the the paragraph element to a motion a component then audience simply while hover to handle uh the the hovering gesture for example let's let's let's this time change the color of the text all we have to do is add in the color attribute and the value when we have when we have all over the text the color will change in a smooth way for example let's say move scaling here to make the make it clear to see let's scale it t2 for example while hovering it will be it will the text one however will be double its size we can also handle click for example using while tab for example when we click let's rotate it 10 degrees all you have to do is click in and the animation is really smooth and looks pretty natural we didn't cover the drug example let me let me uh apply the animation on the image uh element so all we have to do in this case is adding drug then apply and drag constraints give me a second to check the documentations so gestures using the api everything is in details animation helpers there is the drag option and you can see how we can do it uh either using layout animations or uh where where it explains how what are the possible values for the drug constraints for example in this case we can add either one to or cover the four sides in this case set the reference of course to uh apparent component apparent uh component and it will make it really smooth to work for example let's copy this portion of code to use ref uh i'm bought using ref okay come on from react try constraint we need another let's for example set as it did only left and right zero and 300 add a parent to control uh to manipulate the to assure the the constraints and finally right using the constraint f that way we can manipulate it according to the size of the div so refresh what is the problem in here oh yeah the div is exactly the same size so for example let me add this style to make bigger heights set to 100 vh for example so that case we can i can't draw it okay i'm having an issue in here uh should we pause for time or just uh yeah i think that's okay i think i'd like to kind of open it up for for discussion i'm sure it'd take a few minutes just to figure it out it's not a big issue here but uh i'd like to be a little bit more interactive so i think maybe we can kind of pause here and open it up for a discussion with the team um right sure does anyone have any comments or something um i just wanted to say i think it's really a great tool and i think it's very easy to use i regret not using this before um i definitely checked it out and i thought it was like hard to use but uh you know thank you so much for demoing showing us like how easy it is to like get started pretty quickly um and if no one has any questions could you potentially demo the the path uh animation yeah uh that's the the second part of the demo oh okay perfect cool that's all i have to say thank you uh i think that uh this part will take a bit of time so uh why don't we just move to the second part so we can demo the the path animation and uh scrolling scrolling based animations what do you think yeah i think that's a good idea okay i did import the the example from another page and uh made an inline condition for those who didn't understand it so i can sell the example or the second component will appear on the screen directly that's just a few portion of code to implement or to show a content to make it scrollable and we had set an svg in here on this vision here to see how to apply uh scroll based animations and also uh the path animation so uh go into exam the example code we should import uh use effect and use state in this case because we're gonna use uh some states to manipulate and use some hooks the api hooks to manipulate them as well will import the motion component to make the elements motion components of course we'll import use a few pause scroll to handle the scrolling and track the scrolling will import use spring which i will explain in a bit also the use transform hook which was explained in examples and we will do we'll redo it again in this in this case so uh first thing we'll be doing uh is uh that it is a must to copy the svg code inside the in inside the react components in order to animate them because if we just may uh put them in an image component that won't allow us to uh manipulate each element or each part of the svg uh in this case for example we'll be working on how to make the animation uh of the progress uh according to scrolling progress with the this circle in here so all we have to do is for example as uh uh uh as we are going to show the the path length animation it is pretty pretty easy to use all we have to do is add in path length to style of uh path length is a variable containing what containing it is a constant containing uh an animation uh set by whose spring uc prank is a hook that animates that helps animate into a new state in a smooth way uh without uh needing uh to go to react's life cycle rendering in here what we do what we do using use spring in this case is tracking the aggregate range variable which is uh which takes use transform and takes scroll aggregate progress in this case score aggregate progress uses the use viewport scroll to throt the scrolling position using uh the hook uh the use viewport scroll hook knows the exact position scrolling position and puts it in the scrolling progress variable according and depending to this scroll this variable the value of scoring lag progress in an interval of 0 to 0.9 we a great range contains a value from a range of zero to one in order to give us the the opportunity to uh to see that uh that the content is ended before reach the the the bottom because if we used from the interval from zero to one in uh the use transform in the cases of a score in the according to the values in scrolling greg progress this will uh turn to one when uh the scroll where the score position is really rich at the end but when we use 0.9 that will give us an opportunity to see the animations before we reach the the exact end so we took a greg range to be between zero and one according to the value of scholarly greg progress which is taken using the use view port scroll hook then using that value we use the ring hook which uh sets anonymity and turns to animate uh the elements according to the new states uh found and the new uh value found in the greg range setting the stiffness and the dump in uh to uh uh to the the whatever value do you want stiffness and dumping are uh properties we use in animation for those that use the css animation javascript animation they shouldn't know it should know both of them so after changing path length to a specific animation using new spring then we just use the style props and sets of length in this case everything will be okay according to score position just one thought we should put okay is to turn the path to a motion component because if we don't turn the path to a motion component the animation will take uh won't be taken in consideration in this case as we see when we when the scoring position at zero point the the circle is hidden but when we scroll the the circle is drawing it is we should take in consideration that the path length takes the borders takes the path itself it doesn't animate the content of the circle just takes the border uh which which we managed in here in in the style using uh the stroke turning the color to white and giving it a width of five so we can see it uh clearly path length as we said takes uh uh in charge animating the stroke uh the stroke of the svg and only the stroke of the path uh the fill that has other things to do for example in the animation we saw in the in the landing page they manipulated it using uh the opacity so it will be shown after the stroke is drawn we have several possible other possibilities for example as we see in here the animation starts from the left of the circle we can change that by using either the rotate option which will make it start from the top or using the the scale x or scaly greg which will reverse the direction of the line for example uh it was going from left to right now it goes from uh in the other flow we can't even uh change for example the the scale the greg the great scale let's see let's see it before adding it it's the the animation goes like that so when we add scaling reminds one it will change to go front but from bottom to top instead of from top to bottom we can manipulate it in specif in different ways like that we have seen how to handle drawing the circle now let's manage uh the the check uh icon inside the circle what we need the the anticipated or the desired flow is that the check mark will appear when we reach the f when we reach to the the bottom of the of the scrolling page so what we have to do is go into the path the the the check path in this case turn it first to a motion component then manipulate it we should uh make sure that the the the component won't take the initial value in considerations so the the value or the the check icon will be hidden in first case or in the initial initial case if if we didn't set initial to false the the icon will will be shown in first in first case and that's not what we desire we decide to be hidden until we reach the the bottom after setting initial force we can say let's say yes i should uh first of all uh set the animate prop in this case animates prop takes path length as the uh as the way of styling it the the property that we should style uh we instead of doing it according to the scrolling uh advancement or scrolling position in this case we decided to make it directly to one to make it one directly when we reach the the bottom which means when is complete is set to true it's complete is used is set using the use state hook first uh value or initial value is false uh then using the the set is complete using the use effect hook when the egreg range changes this volume uh on change is also provided by the api so it strikes the egreg range and knows when it changes so using it in the use effect uh hook will make it pretty easy to know the exact value of the changes uh happened by greg range then when v reach is uh equal or more than one uh the value uh of his complete will be set to true and in this case the animation will the value of the animation will change in the animate pop just refresh the page let's say place saved yeah i mixed the values instead of using one zero i should change the values in here in the condition it's true yes that's it i thought that was the problem using the scale the greg has changed the the logic of uh showing the instead of being invisible then appears it wanted to be do the inverse so after just applying this view spring hook and the animation when we reach the bottom the check mark will appear all by itself in a smooth way smooth animation of course enough of the the circle will be manipulating the second icon in here at the second svg in here which is a motorcycle let me show you aspects okay svg change the position which is a motorcycle the idea is to make the motorcycle cross the screen when we reach the the bottom of the scrolling value so we are all we have to do is uh first of all changing the the direct position to egreg paul's egreg pose is a constant we added using the use transform value which will take in consideration scroll egreg progress uh a value from 0 to 0.9 and gives a value to a great pause from an interval from 4000 to zero that will uh animate uh that will change the greek position uh the y position to a certain value according to the position uh we are in we are having a scrollign progress so in this case what is it okay after set it yes i should add motion what svg since i'm adding animation in here each component so now when we move the volume change the interval is not being in right direction since i'm changing the the y axis it will go tom so the point is to uh using the the y position in this case is to make sure the the svg returns to its position when we go up without crossing the content in order to apply the proper animation we should uncomment the animate prop and the transition prop in this case we set the x position from each either 1 500 volume or zero according to the the the state is complete if we reach at the bottom or not we set the transition to so the animation will take two seconds to uh change uh or to change the state in this case when we are scrolling nothing will happen but when we reach the bottom the uh motorcycle where will pass under the content and when we go up it will return to its position without crossing the content because we changed the y position so it went beyond the screen and went back to its position that way when we reach the bottom again the animation will happen in a smooth way and won't cross the content it won't cause any disturbance to the users to see that's all for for the demo uh uh are there anything is there anything you want me to uh to add or something like that while we are coding nothing i think that was pretty clear uh but reactors if anyone wants to ask or have any feedback or thoughts no it was cool i might say it was cool i've heard of it i never used it uh just like i've mentioned a while before he's gonna try and use some kind of scare me and i'll still go to my old css ways to do it directly in css so yeah this this was super cool to look at and the way it did it actually looks so easy now so i'll definitely try it the next time i won't use direct css because it's hell i guess let's start for the demo so to the presentation let's start opening things up uh after seeing that all a developer can do is following uh as the one michael said trust that little voice in your head that says wouldn't it be interesting if and then do it that approach or that approach of uh thinking would push us to explore really complicated animations i started imagining horrible scenes sorry you go on sorry sorry i just had a very bad joke in my head actually uh making complicated animations is uh based on simple animations the way you imagine each attribute of css attribute the change will make pretty cool and smooth animation especially with the power of the api so it's it's all up to your little voice saying wouldn't it be interesting and your motivation to do it of course for additional resources i don't really think we need them because the api covers all all the details and it is it really covers all everything and explains it uh in a particular way the website contains pretty cool examples that we could interact with uh the examples in the api are are available in sandbox which will give us the opportunity to see how they did it and of course there is the the demo code that you can clone and comment the code or add any changes you want or just create a react project and install the api and start tweaking around that's all thank you and i wonder if there are any questions excuse me i think mariam is asking can we use it with glass components and stuff uh using this library with class components i guess the answer is yes though yeah in the uh in the chat sections section mariam is asking okay let me check the zoom one and it's only one question she was just asking if it's possible to do it in class components [Music] that's a class component what do you mean but by a class component for example in here are we talking about uh attributing a class to a div or what exactly not sure about your question though i didn't really understand the question uh yeah my question is uh we are using the talks and class components when we using classes and they asked yeah uh so uh we use classes to style components right maria yeah we use classes to style components the component when we add motion dot is turning them to motion component is exactly the same as an html component we can apply classes we can apply style we can do anything we want uh only that they added uh uh the bark and treatment of animations so they could handle uh the the api animations in an automatic way without you struggling on how to do them in a small natural way i think what she meant was uh the examples were in like uh showing hooks and functional components and there's other ways to doing that yeah yeah well it can be used in the the class programming approach but it would be more efficient to use it in the functional programming since uh there are it depends it depends on using which is something you know we don't use really with class components the class programming approach operating okay thank you of course nothing no problem uh any other question uh nothing from my side nothing from my side all right thank you for your presence uh if you have any further questions or uh want some advices you can reach me on my uh either on my personal uh website or off codes or the fuzzier email twitter or slack thank you for your time and they hope you like the presentation bye

Channel: PhazeRo

Views: 565

Rating: 4.8095236 out of 5

Keywords: tech talk, educational, informative, learn, tech, silicon valley, startup, design, code, coding, ui, ux, designer, react, ux designer, ui designer, front-end, front end, front end developer, developer, web dev, Figma, Sketch, Design system, frontend, angular, react app, design systems, javascript, JS, wordpress, webflow, chrome, dev, devtools, lighthouse, framer, framer motion, animation library, animation, prototyping, magic, React

Id: cLmgIOc-mMQ

Length: 58min 27sec (3507 seconds)

Published: Thu Apr 29 2021