Animating VueJS

all right I'm really really excited because I get to talk about like two things that I love the most in the world which is animating in view today a lot of people are probably not that familiar with you so I'm gonna actually talk about what it is as I talk about how to animate in it just in case you're not familiar yeah so like I said my name is Sarah Dresner this is a picture of me picking my nose as a child and also my relationship with Authority um my poor mother that's how you find me on Twitter at Sarah IDO I used to be a consultant until recently which did not mean that I was unemployed I worked with a lot of really wonderful companies including Smashing but recently I took a job as a senior cloud developer advocate at Microsoft so that's pretty cool and I'm gonna talk a little bit about some of those things today okay before we dig into how we animated in view maybe we should talk about why we're animating at all strangely enough our story starts with performance when people visit a site we have something called the so what factor user attention is really short and we have about two seconds before it fully drops off Amazon's discovered that for every one second delay conversions drop by seven percent Walmart found that it gains one percent revenue increase for every 100 milliseconds of improvement and if someone waits for your site for over four seconds they they express from MRI reports we know that they feel the same kind of visceral reaction that they do when they watch a horror film so I guess this would be if you were watching Burger King site load or something like that but perceived performance is a way that animation can help when we're working with web sites humans actually overestimate passive wait times by 36% Eli Fitch gave a great talk at CSS def Kampf last year called perceived performance the only kind of performance that matters which i think is a really really great title and it's true because the way that we perceive how long things are taking really really does matter in terms of performance and it matters in terms of how long customers will wait for us so your benchmarks if you're using Google Chrome timeline or something like that aren't really telling you the full story so begat did an experiment and found that despite some individual variation when they tried two different loaders on their site people who are willing to wait twice as long for a custom loader so if you look at these two loaders but we get loader that ended up being twice as long it's not so fancy it's not so incredible but it does tell the users it gives them a signal that somebody cares about them so what's happening here here's heat maps of your eye as it goes across a website so we have all of these different pieces of attention it's moving your eyes are moving around constantly an event called saccade they never stay in looking at one place and you do this to create spatial awareness you do this to kind of understand you know the environment around you you're a predator so you're trying to look at the environment and see if something's changing so you can eat something or if something's gonna come and eat you so you can run away so anytime something changes in that environment you have to remap that mental space I really love this quote it's we've evolved to perform actions that flow more or less seamlessly we aren't wired to deal with the fits and starts of human-computer interaction so things naturally transition the flamenco dancers didn't just like pop up on the stage they walked out onto the stage and you kind of knew where they were coming from and where they're going to and that is really true that's how we're trained to see things so we're not if you're working like looking at a site on mobile and all of a sudden a modal pops up in your face you're distracted you're probably gonna click away from it it doesn't feel like a good experience so we've actually evolved to think that anything that pops out that pops out at us is actually a little bit frightening with anything that kind of comes into our purview without us knowing about it first is not something that is generally you know accepted very easily by our evolutionary biology so here's an example of how we can gain spatial awareness and understanding on the web here we're this is an example from code drops and we're just picking our seats at a movie theater but you get a real understanding of what that experience would look like and what it would feel like and even if you change things in that environment they guide you seamlessly from one transition to another without transitions we lose an opportunity the user has to remap all of that space and it doesn't feel as fluid it feels a little bit more clunky in Paul Bacchus illusion of speed he maps about he talks about how users map that small interactions if there's a lot of them are perceived as very long and one continuous activity is perceived as very short so I made this pen to kind of explore that and see what that might look like so we've got this pin that opens it up into a contact form labels move out of the way to gather input and then they become the loaders that in turn become the success now if I asked you where's the contact form you would say it's in there but there's no in there it's all just divs and form elements and they're absolutely positioned and things like that but because you have a sense of that you know physical space and because you have a sense that that just comes out and has one long continuous activity it doesn't feel like there were four different modal's that are hopping in your face it feels like one fluid activity so before we animate in view we're gonna talk about actually like so many ways to animate in view today and like just like a myriad of ways there's one that's really really important that's the transition component we're gonna spend a little bit more time with that one but it's important to understand that I'm not gonna make you learn every single way down to the T I'm just kind of wetting your palate for all of the things available to you for you to dig into later so we're gonna talk about how we work with you we're gonna talk about that transition component that I mentioned we're gonna talk about the Watchers and the reactivity system so you understand what those are we're going to talk about SVG of course because I love SVG we're gonna talk about coordinating state with view ex and lifecycle methods and animations versus custom directives and also server-side rendering okay let's start with the basics so just a tiny comparison if you're not aware of what View is or does at all it offers a virtual Dom it is a reactive it offers reactive components that offer the view layer only so you know angular is reactive but it's an MVC view is a V like just like reactive it's just the view it offers props and a redock Redux like store just like react does it offers conditional rendering services similar to angular and it's inspired by polymer for simplicity and performance so you're writing HTML CSS and JavaScript in tandem basically Avenue the person who wrote this framework looked at the entire landscape of JavaScript frameworks and and took out the bits that he thought were you know like essential and the the things that he loved most about each of them and put them together in a kind of elegant way all right so let's do the obligatory hello world example before we dig in any further so here we you can see we instantiate a view instance we'll create a relationship with that div ID app and then we'll be holding the we are holding the state for the app instead of like but jQuery days of old where we're pinging the Dom to see what's changing we're holding the state so in this case it can be text it can be numbers it can be anything so we can output this in those mustache templates above and it's pretty simple so let's do a really light comparison of vanilla JavaScript versus view with conditional rendering so let's see we have like a big ole list and this is probably something that like an API is giving us or like we're paying a server for things in our in our case we're just like holding an array of things so we're going to translate that to a list in our Dom if we're getting that thing from the server how do we do that with vanilla JavaScript so okay well create a simple array and then we're going to create a function and we're we're gonna basically like make a for loop with that list and then we're gonna go grab something out of the Dom and we're gonna insert those things into the list and we're gonna be able to access it that way but it's pretty imperative we're gonna call that function and then we're actually gonna add that to the Container so there's a bunch of things that we have to do we're really following things like steps in a recipe it eventually this kind of way of working can get a little bit convoluted because if anything changes we're gonna say hey Dom what's going on over there and like go ask it for things so you know this outputs this like very very simple list that we have here but in a view instance we store the data we are storing the state of the thing and we're holding that information and then in our div ID app we say L IV for item and items and we output all of the items and then we have this whole list printed to the page it's really really clean and easy to read and there's not a lot that you have to do to grok that information so I love this approach because it's clean its semantic I really like writing semantic code it's easy to maintain as a consultant I love you because I can walk into a project and I can know exactly where everything is and I don't have to understand a ton of context before digging in it's really declarative you saw we're like making the computer do a lot of the heavy lifting so we can easily read and work with the data it's very legible and because it's legible it's easy to maintain you know because I can look at it really really simply and very easily between states I know exactly what I need to do to update it so it's also reactive which I won't dig into yet but we have a whole part of this talk that will we'll dig into that so you might be wondering why I'm showing you a picture of an iPhone I'm not gonna talk about mobile dev I'm just showing you a phone because I remember getting my first iPhone it was the sophisticated piece of equipment and some of the best engineers in the world work on it and I felt like it was really really powerful but when I was using it I never felt pandered - I felt like everything was at my fingertips and I didn't need an struction manual or anything to figure out where everything lived or where everything worked how or how everything worked that's pretty much how I feel when I use view it's very very similar I think sometimes people think of simplicity as meaning that it's not powerful but view feel simple while giving you all of this lower level access to all of these really really fundamental things that you can do that are really really powerful ok so let's talk about the v-model really quickly there's a ton of directives in view but this one is pretty interesting so it can kind of give you a sense of what directives do before we start making some animation custom directives in a bit so in order to keep you productive we get these things like like v-model which gives us access to deeper functionality so these directives keep us from yak shaving they keep us from having to re-implement the same thing that we're always implementing over and over again so what it does is it establishes a relationship with an input so on every keystroke we're recording those changes in updating them in our state so we're accepting that user input so again we've got that element of the app and then we have like a string like this is good place to type things then with our v-model directive we're creating a relationship there and you can see it's still like normal text area and normal things like rows and max length and classes and then we're going to output whatever people are typing there so if we're writing here and I'm writing gonna write really slowly I'm writing here and it's automatically updating it's automatically updating for us and it's all automatically updating for the way that people are typing things and so you can do things very quickly to user input which is a pretty common use case on the web so in terms of animation because this relationship was established with so much ease you can do advanced effects because all you're doing is wrapping one component and only dealing with what's going to happen during those animation States so you already know how half of this demo works and by the end of the talk you'll know how the other half works too tada okay so let's talk about the transition component for a second so if we have something like a modal we have like the app child which is our modal and we have this button that's going to basically toggle the visibility of it then the inside view we have something like you know whether it's showing or not and we're gonna toggle that based on that button activity and so if we click it then okay the thing appears that's that's okay but it's I just mentioned it's not so great when something just pops into your face so what do we do with this app child well we'll just wrap it we're just gonna wrap it in this one element called transition and I'm gonna give it a name and then I have all of these hooks with which to work with views got done a really really good job of understanding these transitions of state because the guy who wrote it is really really into animations so you can see we have different ways of hooking into this the V enter active and the V leave active those are the places those are the hooks where we can put all of our animation logic so our transitions go there our CSS animation go there our JavaScript animation goes there and the enter and the enter two are just what you want it to do right before the animation kicks off what you want it to do right after the animation kicks off so before it enters right after it's done entering and so on and so forth so if we wanted to do a simple transition we just plug into that v enter active and all we'd have to say is you know transition color when one second easy that's really all we need to start making that transition happen so it's reusable for other components too it's pretty typical use case that we want to toggle some visibility so we've got the interactive via be leave active and we've got that transition and then we're saying what we want it to go to so now when I click it it's a little bit better we see a little bit more of that transition which is great but what would happen if we wanted to make that background content kind of fade out and that you know the modal take center stage that we're not seeing we're not trying to grok all the information of what's in the background so we could use the transition component but we'd have to wrap the whole background and what we really want to do is just transition a little bit of style for that so view actually makes that really easy too so what we can do is we can say something like if it's showing use a blur class if not don't and then we're also using that transition component and we have you know this like little filter on the background that's just a blur of two pixels and as we trigger that you can see that the background is now fading so that's cool but there's much more that view has to offer in this transition component and one of the coolest parts is this thing called transition modes so it's pretty common that you want something to transition into the Dom and then you want something else to transition out so usually what ends up happening is those things are present in the Dom at the same time when they're both fading like there's just a second where they're both like me that's the technical term and so what what you really want to end up doing is you want to either insert a callback if you're working with JavaScript that like waits for one thing to finish and then the other thing to enter or if you're using CSS animation you'd make like an impose delay between those two things so that they're not present in the Dom and at the same time so these transition modes will allow you to coordinate these two things without even touching any of these things without writing any kind of imperative code so if we have something like this these are two elements but because they're you know using these transition modes one is fading out completely and it's just turning this way and then the other one is turning this way at the exact same time because view is coordinating all of that for us and it looks like one consistent experience I'm just telling it to you know as soon as that one comes out this other one's coming in and without that we kind of lose an opportunity it's not the biggest thing in the world but you might have seen this a lot online basically both of them are doing the same thing at the same time and you're missing one of those animations because it's hidden behind the other one so in out for a transition mode the current element waits until the new element is done before coming in and firing and out in is the current element transitions out and then the new element transitions in usually you're just gonna use out in like don't even try with the other one unless you really need it like most of the time you just need out in so this is what are what we like that thing that we just flipped over this is what that looks like all I do is say on the transition itself mode out in and it coordinates the state for us so pretty cool all right so we got through transitions let's talk about CSS animation all right so it's still the transition component we're still using that same transition component but we can use different classes for that so we can reuse animation we can plug in to CSS animation libraries if we want there's a lot of flexibility here so if we want this bat ball to bounce and then roll out we can say something like you know interactive class is bouncing interleave class is roll out and then the bounce is I'm just basically you know you have to use transforms in order to make things really performant for the web so I'm just drying it out with a mixin and using that and then I can use that bounce for other things so if you have something like a fade that you're using over and over again you can keep it very consistent across a large code base okay so now let's get to some JavaScript hooks because there's some really cool things that you can do with JavaScript all right so we've still got that transition component and but we have all of these kind of different ways of hooking into it you'll notice that we say CSS false that allows you to know like hey don't go looking in the CSS for this go look in the JavaScript instead and we have all of these hooks available to us but really most likely all we need is this enter and leave that's usually what I end up using so basically it's that same transition component again but now if I go into my methods in view I have that enter and the leave available to me we're also going to pass in a zapper am we want to allow it to you know basically tell view when the animation is done so I can do things like coordinate those transition modes so now this demo that you saw before you kind of know how it works we can hook up v-model and animate the text on in a really playful manner so what that looks like for you know the transition component is this before enter enter CSS false and then in view itself we have this these modes so we've got this before enter I could so put this in my CSS actually it's just setting CSS properties on it but the reason why I do put it in my JavaScript and this is a stylistic thing this isn't working with you is that transform transform perspective perspective and transform style are all things that affect it the element while it's animating it doesn't make the thing look any different before it's animating so people might come in and be like hey what's this code for I don't know why this is in the CSS if I remove it it doesn't do anything to the element and then they can if we're all maintaining the codebase together they're like I'm an engineer who likes deleting code let's delete code and then all of a sudden your animation doesn't work so a lot of times I'll tie those together so it's a little bit more obvious to people maintaining after me that those are connected so and then in order to make it enter in you know and scatter around basically I'm telling you know tween max which is a green sock animation API to take it from this area and bounce it around and I'm basically giving it this like randomized Z you know index and kind of like throwing out all over the page and that's how it bounces into the view I also if you're working with something that has a timeline like green sock or like mo dot J s you'll want to pass in something like uncomplete done into the instance itself they have those hooks so use the animation the the timeline hooks that are available for each library that's just like gotcha that I wanted to mention okay transition group is also really fun and this one is a huge time-saver so let's dig into that really quickly so there's this thing called flip how many of you are familiar with flip in animation not a lot very few okay so basically what you're doing with flip because transforms are more important than changing things with whit's and tight tops and left's you basically if you have this component and it's going to change or this element and it's going to change position it's gonna change in size you're gonna get the bounding client rect of that thing and you're gonna get it of the other thing and you're gonna figure out the space in between and transition those so flip stands for lat first last invert play and it's a way to get really smooth animations on the web and it's a way to ensure that you're always using transforms in order to calculate those things but the trouble is and maybe you got this from me just explaining it it's really hard to implement it's kind of a pain in the butt basically you have to go get those coordinates you have to calculate all of those things for each element and when you start to have a lot of elements this is this turns out to be really arduous so for one element it's kind of okay for hundred elements it's a bit of a pain and it's a little clunky to write so view offers us this thing called transition group and what it's going to do is it's going to just give us all of that flip under the hood for free it's going to figure it out for us so if we have something like this lazy Sudoku where all of these elements are constantly moving around on the page all of that flip activity is going to happen and we don't have to do any of that view is going to do all the logic for us and basically you just keep shuffling this until you win this is an example from the guide ok so another thing that we can do is we can leverage the reactivity system for animations and transitions so view is really awesome because it actually grants us deeper access into the reactivity system which we can leverage for asynchronous updates animations or transitions so let's talk about Watchers really quickly and that's that's the thing that we're gonna plug into before we do so it's kind of important to talk about what reactive programming is because I think it's really confusing to a lot of people and a lot of people are you know not really sure what it is and they're like oh well it's rxjs well yeah ok rxjs is a type of reactive programming it is you know they're if reactive programming is like a big umbrella it like fits inside of there but there's tons of ways to be reactive so let's talk about what reactive is and means reactive programming is programming with asynchronous data streams ok like come on what is it what does that mean basically you can think of a stream as a series of ongoing events ordered in time that you can start to plug in some hooks with which to observe it so a really common example of this is if you're in Excel and you have two cells and you just say okay make the sum of these in another cell just whatever those two might be so if you went back to one of the first cells and you changed one of those numbers it would still give you the sum at the end that's because we've put in a hook to watch that other thing so basically reactivity and reactive programming allows us to program asynchronous code as if it was synchronous and makes it a lot more clear what's going on so when we use reactive premesis for building applications this makes it really easy to update state in reaction to events which is usually what we're doing when we're programming applications that's usually what we have to do and results has a really good post about this by the way that's the link so what is reactive I think people are kind of confused still like who uses reactive programming what it is actually everybody uses it a little bit differently angular 1.x has dirty checking cycle and angular to use things that are similar to extreme and rxjs view mount mob x and r active all used getters and setters and here's the one of the weirdest ones despite the name react is not reactive it uses a pole approach rather than a push approach so if you are we're not going to dive into this any further I just wanted to make all that clear if you want more resources and to dig in further there are some links ok so we've got this thing called Watchers in view I mentioned that that's how we're gonna plug into the reactivity system so we're gonna watch any data property declared on the view instance and you can see every time we update this I'm just console logging because that watch is on the counter it's basically using something that's in our data and it gives us something to plug into anytime this thing changes give me some access to it so that's really good for animation because state change can create the animation so here we're using Watchers we're basically spinning up a chart with SVG and we're you know transitioning that state with Watchers we're telling it anytime you see this thing updating these numbers updating change them for us you know and and you these kind of animation tools in this way of doing it in order to do this and SVG is really good what for this because it's built with math so I made all of this chart without any library like d3 or Chartist or anything and could avoid that whole thing because we have all of those directives that I showed you earlier so if you know SVG well enough you don't even need a big library you can just output it because it's built with math so I have these kind of like V if and you know that kind of stuff that you saw earlier and then I'm able to spin up an entire axis with very very little code that's really really fun and we don't have two plugins or Watchers to transition the state either because we can we're already plugging into the state all the time anyway you saw that we were binding those classes so view offers us class and style bindings and at you know SVG is really good at with this so we can you know use some SVG and make this weird Tron you know effects in this Tron like pen and really all we're doing here is we're saying X and y are 0 and this dot X and this dot y are plugging into e client X so wherever our mouse is going to be and then oh then no my slides died ok give me one second all right we're back in business sorry for the delay there there we go all right now if we want to track progress all we have to say is perspective origin and then we changing the percentage of those prospective origins in our template it's such a small amount of code to make that crazy effect that we just saw so SVG animation and view play really nicely together because we're still working with the HTML the way that we are normally working with it so we've got you know this little Wally that's kind of moving across he's gonna go try to find his like a little cockroach friend which is the mouse and he's reaching out so basically the way that this is this is working is we've got this Wally guy and he's kind of looking around while stuff and we've got an animation that I did the whole animation of but I'm gonna plot the progress of the animation along with that a client X that you just saw so as pops out that's what's going on and emotions are tied to your limbic system so anytime you make your you feel something they're gonna remember it a lot better later so in the view template itself we have at mouse movement coordinates and then you know so anytime we have a now a mousemove event we plug in two coordinates and then basically I'm doing some logic to figure out where the mouse is and how to plug this timeline into the progress of that thing and then it allows him to move around also in order to make his arms move in and out and this is an SVG thing I'm using this clip path in his arm that's allowing you to see pieces of the arm as it goes in and out so because SVG and view play well together we can do all sorts of things with form elements we're gonna use all of those lovely view directives that we saw earlier and manipulate and interact with SVG on the fly as well so since SVG has a navigable Dom we can spin up pieces on the fly change its visual output and of course play and pause animation as we or they wish the user wishes and since SVG is flexible it can be interactive and we can write things in it and play with all sorts of different ways of working with it but it's also still an image format so whatever we make on the fly we can also download and the graphic will even respect all of the animation transforms that were applied while we were creating it as well pretty cool so we've got you know these create big circles and small circles those input elements and then we're basically spinning up all of these ways to work with those elements onto the page on the fly and because SVG so small we can do it super fast the user won't even notice that something is loading okay so let's coordinate a few transitions so far all of our animations have been in lockstep with one of one another in terms of our application but what if we have a giant application and there's a bit of state that state that's stored and we don't want to pass it up and down from parent to child well we can use a thing called view X which is similar to Redux if you're familiar with react and you can use these you know these kind of events to work with animation as well so just to let you know you can use Redux in a View application if you you know so wished it is compatible but view X is very similar to and it's you know also made for that framework so it's up to you so if we have something like this where we have you know a component where there you know there's a bunch of different components being loaded based on the state and once we've encapsulated what we're changing the component each owns its own state so the entrance will be consistent as well as the exit so we can change their order and we can change their placement in time anything we'd like to do with it so in this example I have this idea in the main store of these screens or templates and you know once we get to the last one we loop around and go back to the first and then for the components themselves we're basically saying if we're at one you know fire this component if we're at to fire that component and we're using a lifecycle method to do so so view allows us grants us access to do things when the component is mounted react does allows us to do that too so it's like component didn't mount in react and it would be mounted in view so we're allowing a timeline and a bunch of animation to occur on those lifecycle methods so if you have this thing where you have a component and there's a bunch of things that are happening like basically the component is being put on the page we have all these hooks and that we're allowed to use so like before create created before mount mounted and then before destroy destroyed there's all sorts of things that we can plug into to make animations occur all right but let's talk about custom directives because those are pretty cool so we had that directive that v-model thing and that's really cool and so as the V if you know just being able to say I need some lower level access to do something to run some logic but what if you want to make your own what if like that what they have available to you doesn't cover your uses and you're kind of writing things over and over again well view allows it you to register these custom components so let's do one together so here's how we would create a custom view directive it's probably most common to hook into bind so we've created a custom directive called attack it's actually not that useful yet all we're doing is setting position fixed so let's try to do one better we can pass a value into the directive make it a bit more flexible and then we can tell the v-tach directive to stick this element 70 you know 70 pixels from the top of the page now we can pass an argument so if we don't specify anything it'll be tacked to the top otherwise it'll be tacked to the left and that's a little bit better so you know we have a little bit more room to like work with it and you know try different things with it but can we do better of course we can so now we can do more than one value and we can say okay we want one thing for the top and one thing for the left and they can pass that in separately we could also keep going and do it you know right and bottom as well and now we have something that's like really flexible so let's apply that to animation in this example we'll create a directive that attaches to a scroll event so it allows you to attach functionality to that scroll event and do some animation and then it will allow you to remove the listener so you might be familiar with like scroll magic or scroller or waypoints there's tons of libraries that do these kind of things and they're all huge now we can write you know a few lines of code have this directive available to us and you know be able to use it whenever we want so now we can do something like have this little scroll event trigger this like beautiful animation that comes up so now in the I'm in the process of making this demo which is like a little sneak peek of it but basically it's working with those custom that custom directive that you saw earlier and plugging into d3s functionality so I'm allowed to do these things with scrolling telling where I plug into NASA's information for fireballs and like as you're scrolling down the page there's all sorts of things that happen with just such a small amount of code to do so so we're up we're going to update all of the circles coordinates so we're basically like plugging into that directive that you saw earlier and changing all of these attributes if you're not familiar with d3 all these attr that's just changing a bunch of attributes of things that are already exist on the page okay page transitions is the one of the last things that we're gonna do page transitions is one of those things that's like kind of a bummer because it's kind of hard to implement it's really difficult to get things to kind of coordinate on pages and it looks so nice when you're on mobile when you're like on a native app and things are transitioning very fluidly from one thing to another but it's harder to do on the web but there's this thing called next that allows you to work with with view kind of similar to that next with react and it has this CLI so it spins up this whole application for you right out of the box and gives you page transitions out of the box too with no configuration it also allows you to do server-side rendering out of the box too which is really nice because by rendering on the server you can cache the final shape of your data which basically means that you can increase the speed of your site and not you know allow additional requests to the server to bog down your site so here's a way that we can actually have code splitting and server-side rendering all with this one terminal step so we would install this thing called view CLI and then from our terminal we'd say view in it nook starter my project and then we have this thing that we can work with so you'll be given an index page in the pages directory and if you dump that content and create a simple you know view file with a next link and you can have those links point to one another you have routing already available to you which is really nice so basically this pages directory allows you to still work with view files in order to create routing you don't ever have to step out of that way of working with components it's so easy to work with and they already give you a hook for it so you don't even have to make a transition component or anything you can just hook into this page interactive you just write a bit of CSS and you can transition between pages entering and pages leaving which i think is like another tada like that is so awesome you don't have to do a lot of things to create these beautiful effects and you don't just have to use transitions we can create animations too don't never never animate like this I'm just doing it so that you can see it purposes of the demo if you have this like this small amount of information on page you got a kind of show people have been a more flamboyant way yeah don't come out of the session and be like Sarah told me that oh I'm throwing my my things around because it's at the end of the talk and I'm just like okay we're ready for a break now so we're gonna create some animations - we also have those JavaScript hooks available to us so we have those modes like the out in so we can basically tell the page wait till it's done transitioning out before you let the next page transition in that's a big one and then you can do all sorts of things with it like what we were doing before so here we can create really steep seamless and stylish page transitions that change per page so they're not even transitioning the same way every time the text and all of the mountains and everything that are in the background are transitioning in a different way and because it's all done with SVG it's also really really stable when we go to mobile and I didn't have to write a lot of media queries for that either it's just like you know changing based on the container so this all of this is done with such a small amount of like futzing and figuring out all of this code so the repo to explore that code is there and there's like a live demo that you can go play with and the last thing that we're gonna talk about and which will take two seconds I promise and then you'll be able to go eat and drink and be merry as I mentioned before I worked for Microsoft as a developer advocate and people often ask us developer advocates where we're speaking next and what cities were going to so I made this demo that allows you to play with serverless functions and views so I'm using Azure service functions to get all of the geolocation data for that globe so serverless is one of these like terrible click-click beatty titles for something that's actually pretty interesting and basically what it allows us to do is run a small function on the server without babysitting the server we're not scaling anything or anything so I'm gonna ping the Google the Google Maps API and get that data and then I can go and create whole globe and I'm using three.js for that globe so I have a single element and then on mounted remember that lifecycle hook we had earlier we're gonna call the logic for that globe and pass in the texture of that globe that we saw earlier and because view and three j/s play together so nicely not that you'd want to do this but if you wanted to change the the appearance of that globe all you'd have to do is change one line of code I could just change the sphere geometry to the ice I saw Saheed Rijn I can't say it because it's like the led to the end of the top but that's just one line of code in order to get these kind of really really amazing effects so view makes it extraordinarily simple to create complex and beautiful interactions for the web that feel really seamless for our users we can connect states and reduce cognitive load for things that are changing in our app with ease and also on a personal note sometimes when you're maintaining large scale applications and working with all of these components corporate deadlines can really start to burn you out this happened to me and by working with stuff like animation that gives you and your users these dopamine rushes of excitement you can stave off burnout and still continual can you continually remember why we love working with the web so damn much thank you so much

Channel: Coding Tech

Views: 76,044

Keywords: vuejs, vue.js, animation, svg, front-end development, web design, sarah drasner, javascript

Id: Vp37fWKOlV4

Length: 42min 6sec (2526 seconds)

Published: Thu Nov 30 2017

Reddit Comments

[u/Downvotes-All-Memes]

Listened to her on a JavaScript podcast. Really great speaker with an incredible grasp of all things animation.

[u/superdave42]

I was impressed with her on the software engineering daily podcast. Also this is her website:

https://sarahdrasnerdesign.com

[u/eindbaas]

Does she address how to setup transitions for nested components where for example parents have to wait for children to complete their transition-out animations?