Motion in Angular: Beyond Angular Animations

hold on okay um which screen are you seeing are you seeing the presentation yeah yeah okay um do you see my cursor yes okay okay and you're just seeing one window right yeah yeah we're just seeing uh the presentation only yeah okay okay sorry about that i'm not used to uh sharing on teams oh no um okay so i'll be talking about how you can add motion in your angular applications and what options you have at your disposal and which ones to choose when um so before we dive into the how let me give you some examples on what you can do in an angular application since this isn't a talk about animation so it's just a heads up for everyone there will be some animations playing throughout the presentation because i have some uh demos i want to show you okay let's get to it okay so this is a demo i did for ajiro this is an angular project so this is of an angular app it uses minimal external libraries so most most of this is done using just angular animation css animations web animations and all that so you get pretty much a lot of stuff just using those basic technologies you have so let's see some mobile examples as well that uses angular so this is another um demo app i did using ionic for i've heard some of you used ionic before so this is just a really basic stagger animation that i added that you could this is angular animations that you could use in an ionic app so another mobile example this is another project i did for native script naviscript is a hybrid framework similar to ionic it has some different underlying features but it's it's also a cross-platform framework and you could use it with angular so for for this particular video you're seeing all the animations that are done here are strictly using angular animations so you could use angular animations in a mobile app in a pretty powerful way and you could implement a lot of complex animations just using it so maybe you prefer something that has spring animation similar to react's um framer motion or react spring you could also do that in angular using pop motion which is pretty cool um so now let's get into the details every time i talk about animations i often always get asked this question with so so many different animation techniques and libraries out there how do i know which ones would work well with angular and if and if it does which ones to use when so the goal of this talk is to give you a high level overview of the common and some niche animation options that you can start using in your project along with their use cases so i'll be breaking down this presentation into four parts we'll go from the basic to the more advanced one going down the list so we have css animations angular animations and then web animation apis and some third-party libraries which work well with angular this is not an exhaustive list of what options we have this is this is more of just the ones that i find commonly used in angular projects okay so let's start with css animations why css animations these are performant powerful and these are also basically platform agnostics so if you learn if you know how to use css animations in an html project or a react project or review project you could use the same thing in an angular project so you get that transferable knowledge when you move between frameworks so you can use css animations and transitions uh for a few very various different use cases one of the most common ones that people use this for are hovering or hover animations you could use css trans transitions in just a few lines to to add a hover animation to change its opacity or do some transforms or do whatever you want that gets triggered by a hover you could also do a more complex hover animation using css keyframes this is this is the same code you would see in a regular non-angular project and you could use the exact same code in an angular project another good use case of css animations are infinite animations especially if you don't really care uh about the events of when it's done or when you started like so you could run an infinite css animation just by adding that class and then stop it by removing it and then you also get some browser events that get triggered when the animation starts and ends so similarly like i mentioned before you could start and stop animations by adding and removing css classes and that's regardless whether the animations are infinite or not so what this what this means is this opens up the possibility of using third-party css animation libraries which uses the same concept of adding and removing classes to trigger the animations you might have seen um like css libraries such as animate css i think it's called animate style now that uses this exact same concept so what you would do in an angular project different differently compared to a regular non-angular project is how you would add and remove that class in angular you get this nice binding ability between the class names and a variable or a condition so you would be able to add and remove classes just based on the condition that you bind to it so in this example you see class dot bouncing up that that's binded to an element that's displayed variable so once that's true the bounce is bouncing up class gets applied and then once it follows it gets removed and you get this bouncy animation from the utility class that animate css provides you another one is tailwind tailwind i know tailwind is more used for layouts and styling but it does have some animation utility classes as well and and this works the exact same way as animate css so you have the option to use these as well one difference is the tailwind animations are mostly infinite animations so it has those um pulsing and shimmer those kind of animations if you're looking for those kind of animations tail you should definitely check out tailwinds okay so let's move on to angular animations why angular animations it's performant it uses web animation apis and falls back to css animation so you can be sure that these animations are performant out of the box excluding that you animate properties that aren't as performant so what makes angular animations very powerful is their ease of use and they're out of book out of out of the box support for a few of these properties so you could easily add enter and leave animation state changes and then some timing and sequencing such as staggers and also the ability to animate multiple elements so you could target multiple elements at once and animate them together with with different timings and sequences as you choose to to use angular animation to setup is pretty simple you just import the browser animations module to to the module that you want to use the animations and then you have all the angular animations at your disposal this is the basic anatomy of what angular animations comprises of it basically it most it basically contains these five properties um i'll go over it briefly here and then it'll make more sense for those who aren't familiar with this as much uh as we go through the different examples of where this is used and how this these are used so the trigger x trigger is what the animation is called so that's what that's the property that gets binded to your element in your html state defines the two different multiple different states actually not just two so you could define however many states you want and then their appropriate styling which you use the style property to define those stylings and then the transitions is what animations you want to play when you transition between these two different states and then lastly the animate function is what you pass in the actual animation code that you pass in so this would have duration delays curves and all that okay so let's start with the simplest of the angular animation this is state change so you define two states right here if you see the top right code snippet i have two states defined the default state and the disabled state so and then if you see the code snippet at the bottom i just have that trigger the enable state change animation name and it's binded to an enabled flag here is enabled as a boolean so it will if it's true it goes to default if it's false it goes to disabled state and then the transition here defines what animation that it has to execute uh when it changes state between default to disabled or disabled to default and then you get this um this opacity switch with a slight scale change you see on the left so enter and leave is another common one that i would typically use angular animations over css animations it just lets you so ngfs are very a very common way in angular to to add elements to the dom so you add it conditionally and then if it doesn't pass the check it'll it'll remove the element so you could add enter and leave animations to it just by adding the animation trigger name to that element so if you see the code snippet below a regular div with an ngf you just get ngf is displayed and then you get that element appearing and disappearing but with this fade slide in out you get this nice fading effect or whatever animation you want to add it and you can define it just by using a colon enter and colon leave so with that the enter and leave animations you could also target multiple elements all at once and so if the parent is added to the dom you could target its children so you played their children's animation depend based on the parent's condition okay another this is uh similar to keyframes how css keyframes work with a slightly different syntax to control your animation timings so on keyframes you go from zero percent to 100 for angular animations you go from an offset so what the percentages on css keyframes is called offsets here so it goes from zero to one and then you can break it up into as many decimals as you want and then this basically defines the steps between each uh style that you to animate so right here i have three keyframes if you see on the top part of this code snippet you have style opacity one at offset 0.3 and then it goes down from there so it executes it in the order of the offsets and this works this this follows the same logic as how a css keyframes would work so another another really powerful uh another powerful functionality of angular animation is stagger this is implementing this using just pure css would end up with a lot more code and more and the code would be a lot more complex angular lets you do this in a pretty straightforward way just by passing in the amount of delay you want to add between the two animation executions so this uh so uh stagger is so what stagger is is when you add a delay between the execution of your animations so as you see here we add a hundred millisecond delay between the start of the first animation to the second so if you see the first box the yellow box once it starts animating it waits for 100 milliseconds before starting the next one and then it waits another 100 milliseconds before starting the next one so what's different between this and or how you would write a regular animation angular animation code is you pass in the delay in your stagger function so instead of passing in animate directly you pass in animate through a stagger function and then so when you add animations oftentimes you will also need a way to disable the animations for various scenarios i'll go over some of these scenarios and the various way you can handle those so here you have the disabled i guess you could call it a special directive so what this does is it will disable all its children's animation so if you want to disable everything in your app you could add this disabled directive on your topmost level component and it will disable everything everything in terms of angular animation this one affects css animations or other ways you added animation but this will event this will disable all angular animations there's one gotcha for this though this won't affect elements that are added to the dom directly so those such as modals or components that are added through a factory or a renderer this won't be able to disable those so another another scenario where you want to disable animations is when testing so this this comes up a lot usually when i'm testing when i run unit tests do i actually have to wait for my animations to execute and then you end up with this like seconds of animation delays between your tests and then your test takes forever just because it's waiting for any your animations to execute so you could instead of passing in the browser's animation module like we talked about earlier you could pass in the no operation animations module and then what this does is it disables it skips all the execution of your animations and then it skips directly to the last frame so your test doesn't have to wait for your animations anymore so this is a new property that came out i think earlier this this year with version 12. it lasts it lets us pass in the condition to disable animations at runtime so this is pretty cool because so like when you this example this code snippet when the users have a preferred reduced motion setting on their browser you could essentially disable all your angular animations related code just by passing in this boolean value and this could be you could have a toggle in your app or this could be any external factor as well so is angular animations only limited to web and the short answer is no so let's see where else we can use it so you could use the same angular animations on an ionic app there's no difference to using it in an angular app but and there's yeah the so the imports are the same and then how you structure it would be the same you could also use it in the naturescript app the only difference here is instead of importing the browser's animation module you import the navscript animation module and then everything else after that is the same so you structure the animation code the exact same way so this was the one of the demos i showed earlier where i'm using angular animations so the where you see the stagger effect here when the page first loads those are using um the stagger angular's animation stagger so i add a few milliseconds to delay between everything and then it transforms and then fades in and then the menu the menu opens so if you see like when i click on the hamburger menu and then it slides to the right and scales down that's done by using a state change animation through angular animations so you could you could chain some of those animations together to get these nice effect of having two layers stacked somewhat with a parallax effect and then so so all this code are on a public repo that i can share with wayne after this so you don't so you'll have reference to all these code if you need ever needed in the future and then the last one is the bottom sheet so the bottom sheet is using the enter and leave animation so when it when the condition is true i slide it up and then when the condition is false i slide it down so what does this mean being able to use angular animations outside web and using it in different platforms such as mobile and why should you care or how does that impact your angular apps or how you write those so this so sharing animation code has this benefit of giving you consistent experiences across different platforms and also you don't have to rewrite the same animation code multiple times so if you're using a shared workspace like nx or learner you could essentially put your animation code in a shared directory that you could use on different um on different apps so essentially you're writing it once and then you could use it on different platforms even not just multiple apps you could run the same animation code on a web project on an ios app or on an android app all via one code base which i think is pretty cool and is pretty powerful thing that angular animations provide okay let's move on our to our next option uh which is web animation apis and then as the just like the previous sections why would we want to use web animation apis there's there's a few advantages uh with this since it's used since it uses javascript what i think makes this approach powerful is that the level of control it gives you it lets you control those sequences and animation states at a more granular level and at the same time still keeps it very performant this is excluding when you try to animate certain properties that are expensive to animate this is particularly useful for animations that are based on some dynamic values so examples of those includes like cursors your cursor's position say you want to move an element from one position to your cursor's position those would be i would say impossible to do using css animations or angular animations where everything is static but this is where web animation apis come in [Music] so let's go through some of these functionalities in more detail um sequencing of your animations you can chain animations not only on the same element but on different elements using promises so you would structure it the same way as you would write promises for an api call or for for whatever uh function you have and then you would just chain it using the dense so you and then so if you see on the left side you have these three boxes which are chained using the promises dot then and then it executes one after the other also you get more control on animation playstates so you you get this you get to play the animation you don't only get to stop the animation but you can pause it and then resume it from that current pause state and you could also reverse it so it gives you more this level of control all over your animations that i don't think any other techniques lets you do and that those are just a high level overview of what javascript or web animation apis can do it it has a lot more capabilities that that i won't go too much in detail so let's move on to the third party library so since this the web animation apis kind of segues nicely to this so we covered some third-party css libraries in the beginning when i talked about css animations this i'm going to focus more on a different kind of third-party animation libraries this one involves some javascript and an entirely different mechanism to create animations so if you're if you're wondering why third-party libraries that are these type of libraries it lets you do more complex animations so some some use cases that aren't supported natively by css or web animation apis you could go for the third party libraries and also third-party libraries as all third-party libraries not only animations you don't have to write your own code so you get to use some someone else's code that are battle tested hopefully so greenstock greenstock is one of the more popular ones and this is not just in terms of angular i'm going to skip through the setup and go directly to how it's used so this one greenstock's most popular feature is its timeline so you get to create this timeline where you get to animate elements based on where they are on the timeline so this is what it looks like and this is pretty much similar or the same as what you would see in a regular javascript project so when you see a javascript example for greenstock those probably will work in an angular app the imports are might be slightly different but everything else should be the same [Music] lottie is another animation library so if you see the left the the graphics on the left those are a lot of animations that are running uh those are screen recordings but those are a lot of animations that run on your browser so you get this really fluid motion on your browser without having to write animation code so for those who are not familiar with what lottie is slotty is an animation library from airbnb that renders animations created in adobe after effects so you create this animation using adobe's after effects and then those get exported as a json file and then you use this ngx slotty library in angular and then you you would just pass in this json file similar to how you would display a static image or an svg and then it would play the animation for you and you get this fluid like animation without having to write a single line of code to actually create those animations which i think is pretty cool um another one that i touched on briefly a while back was pop motion so if you've heard framer motion for react pop motion is what powers framer motion we don't currently have an angular wrapper for it but we we can still use it directly in our angular animations to create spring animations and all kind of all kinds of fancy animations like these there are a few good resources that i'll share i'll leave a link to but this is essentially how you would create those animations so this is this this works similar to green stocks you have this on update function which basically you just have to set the style to your element and then you can pass in the different curves so you can make it so here i have it a type spring but you could set all kinds of different controls over this you could set their damping their stiffness and all that and then you would get different different kind of spring animation so with this many options how do i know which ones to use when like all of these type of questions the answer is always it depends let's look at a few more examples let's say you want to animate something indefinitely like an infinite animations i would probably use css animations because it's easiest you just have to add a class to that element to start the animation and then remove it when you want to stop it so it kind of makes sense to use css animations over all those other more complex ones let's see another example so what if you want to add a stagger effect to your elements as it enters or leaves the dom so for this it would be more difficult to use css so i would probably end up either writing a bunch of custom css code to handle the different timing or i could just use angular animations since it has that functionality built in so one rule i usually follow when creating animations and when having to choose which option to use i would always pick the simplest and easiest option possible so as my talk i went from the most basic to the more advanced ones if i can go to the most basic ones first then i would go for that before moving on to the more advanced ones i guess this this kind of depends on your use cases as well but oftentimes you could already achieve a lot just using css and angular animations unless you're trying to do some really complex animations such as the ones i showed with springs and those fluid motions i think i'm reaching the end towards the end of my presentation so let me do a quick recap and i'll share the link to this uh talk as well so you have access to all the code snippets so we talked brief we talked about css animations and how you could use those and how and several use cases also angular animations and its different features and we went to we went over how we could use web animation apis to get when you want to make and when you want to create animations that you have more control over and then we also lastly we went over some third-party animation libraries where when none of the three options above work well for your use case then it's probably time to look for a third-party third-party animation libraries that can hopefully support what you're looking for i think with that i'm gonna that's the end of my presentation so okay uh thank you william uh thank you for that amazing session so i'd like to open this floor right now to any questions that you may have for william so also okay probably for starters uh my question is so you would like to to have some sort of like animations uh you know like with routing right because uh i think i've come across a couple of projects that um we can't require that second the kind of um i don't know i think user experience how how easy is that to implement it in terms of like routing instead of just single element yeah so angular lets you wrap so so how would you how you would do this in an angular application is you usually have a router outlet either you have like one you always have one on the top level and you might have nested ones yeah so if you if you wrap that router outlet inside a div and then you can use you can bind that div with uh angular animations and then you have the same access to all the same angular animations you would run on a single element but you just run it on the container of the router router outlet so you essentially can animate the page itself and also trigger the children animation of each router outlet so like you would you you would essentially be able to animate the elements that are leaving the dom when you navigate away from it and then also trigger the elements that are entering the dom from the page that you navigated to oh okay okay okay anyone else has a question could you ask uh i i think to on top of that um like you've mentioned when you have a like uh let's say a product page and then you have like an overview and you have details and you have images they are children and a product so if we apply an animation to the parent router of the of the the router where the children are being shown if we have an entry and exit so anytime you go to overview it will apply the entry animation if you exit and go maybe like to product details it will apply the exit on the overview and apply entry on the product details that's uh that is what you mean yes yes that's right um i think i might have an example for that particular use case let me let me stop sharing and then share a different screen see if i can pull that up real quick oops okay uh let me share my screen again okay let me let me know if you are seeing my screen yeah okay so this is a this is a demo i well this is just a project i have uh and then what you were talking about the route animations i have it wrapped this entire thing so when you switch between different pages you have that exit and enter of the children playing okay yeah so if i click on this one it will fade away and then it enters the with the new page and these are if you look at the url these are actual route changes yeah so you get you you can um you have a lot of control over the route animations as well okay and does it usually have like repercussions when it comes to performance uh for route animations just animations in general oh okay yeah so so if so it depends so when you animate properties that are expensive to animate so so the browser goes through four steps i believe you have the i think it's content uh paint layout i think so there are certain properties that are less expensive and some properties that are more expensive so the the less expensive ones are like switching changing opacity transform scales those are inexpensive and those can usually be run on the gpu so it's really performant especially so you want to animate those that are that won't affect any other elements so for example if i animate an element's opacity so let's let's take this for an example so if i want to animate this card's opacity it will only animate this card it won't affect any of these other elements but if i if i animate this this card's margin it's going to be really expensive because it's going to push the this not only this card down but it's going to have to push all the other cards position as well so you're not only affecting this particular card but you're affecting its siblings its parents container size would change so you want to create animations that target a specific part and only that part without affecting its children its children's its parents or its siblings is the more element that gets affected the less performance your animation becomes so would you personally advocate for animations for better user experience yes uh i think animations have its place um so you don't want to overdo it of course because it becomes at a certain point it becomes just a distraction but something like this where it signifies that this this card is clickable something like those i think those are important for the ux it's not nice to haves i think like cover animations and some animations are actually crucial to the user experience some are just fun to add like some actually i actually did a blog post for odd0 which i think which i'll share some of the links with you wayne after the talk yeah which goes over those in more detail so covers when you oh when animation plays a big role for ux and then where you don't want to add animations okay yeah so to answer your question i would advocate for using animations in a practical way that helps the user not in a distracting way oh okay okay i think those are my questions anyone else has a question okay or even if it's a comment uh appreciation anything i think sorry about that i have two devices open and i always make this mistake of yeah so i i have a comment about you know what um william said about the performance so i think you just target um and i mean you limit your animation to the element box and you don't want to touch like you know margin because it's if you look at if you think about the box model um you just have to keep your animations limited to the element box and not uh you know go for something like the margin box or even the padding i guess in that way sorry i didn't i don't think i got the last part of your uh question yeah i was just looking for some validation i guess is that how how you'd like to reframe that what you just said yes yeah i'm here actually uh am i still sharing my screen yes okay so i actually have that uh section here yeah so this is this is the this is to order it this is the order in which browser renders your elements so the higher it is so so it goes styles layout paint composite and it has to go through these steps every time so if you animate something that's on the composite layer it would only affect the composite layer but if you animate something on the paint layer it wouldn't only affect paint but it would have to do this step again so if you if you animate something here then it would have to go to this step the layout step the paint step and the composite state step so you want to animate properties that are closer to the bottom the the higher it is the more expensive it is and then so the riskier it is to run into performance issues okay anyone else was a comment a question okay um before i close the session william do you have any parting shots um yeah i think so so when it comes to animations i think you can get really creative so and you get better at it by experimenting with it so i don't think there's a straight like like theoretical there's there's some theories behind it but like play around with it and you'll you'll get you'll get to learn more on like how to structure at different kinds of animations so don't be afraid to experiment uh when it comes to animation and then use what works for you because you we have all these resources and tools at our disposal so um yeah don't be afraid to try out animations i know it can be intimidating but you can always reach out to me if you have any questions too so thank you thank you yeah thank you william thank you for taking the time to take us through this session i'm very sure that people have actually learnt about this i personally i've worked on uh not really worked on a product that's required animation but i was more of a i was learning about how to make the user experience better and after seeing a lot of code just with regards to animation for me was uh i was a bit scared of it because like i don't want to touch anything to do the animation but at least like explaining it like makes even more sense on how even you could approach it and yeah as you also mentioned like there are libraries out there you could uh leverage on but of course it's on a use case basis so yeah thank you for that and thank you for taking the time to really explain all this yeah and for the members thank you for attendees thank you for joining us for this session we usually have a session every thursday same time 8 30 p.m eastern time and we have different topics uh renting of course from introduction to angular all the way to uh the nitty-gritty details of angular and we're glad that you're here and as usual this should be available tomorrow on our youtube channel by afternoon so you can definitely just head over to youtube and search for angela kenya you can subscribe of course tum notification button of course uh just to always be notified of the the recordings that will be dropping yeah as william mentioned he will share with me uh the slides d i mean slides link or any other materials or resources and i will definitely put it in the description um in the youtube video but yeah uh there's nothing else i would like to bring the meeting to a close and thank you wahidah for joining us all the way from qatar it's an amazing um it's usually amazing having people uh from across the world like joining us and thank you william too where are you joining us from william i'm from indonesia indonesia yeah thank you thank you yeah yeah thanks thanks for having me all right uh yeah if there's nothing else yeah i'd like to say thank you again and i wish you all a very good evening

Channel: Angular Kenya

Views: 1,470

Keywords: Angular Animations, Animations for Angular, Angular for beginners, what is angular animations, introduction to angular animations, intro to angular, angular intro, what is angular, angular kenya, kenya, angular developers, animations, css animations, css animations for angular, what is animation, user experience, UX for angular

Id: iUDye7Y_mOw

Length: 45min 2sec (2702 seconds)

Published: Fri Jun 18 2021