Animating the Virtual DOM - Sarah Drasner aka @sarah_edo at @ReactEurope 2017

thank you for that introduction Brent it's the end of the second day I know that you're all really tired but I'm going to be throwing things around the screen so hopefully that kind of wakes you up are you ready to learn about complex beautiful animations in the dom on the web yeah my name is Sarah Dresner I'm Sarah IDO on Twitter this is a photo of me as a child and my relationship with Authority I'm a consultant which does not mean that I'm unemployed I work for a bunch of different companies some of them are listed here and I'm actually fortunate enough to work on a lot of cool projects I'm going to highlight some of the work that I'm doing with a company called workflow today because some of the stuff that we're making is really really cool for react development it has not been released yet so look forward to that in the future it's also worth mentioning that in this talk I'm going to start with some theory and then get progressively into more technical details about implementation so if you need to take a nap at any point you know where to take a nap at so I'm not going to go into too much detail here but before we dive into animating the virtual Dom it's really important to address what's changing about the way that we're rendering the virtual Dom in the future with react fiber fiber is a major change to the way that the reconciler schedules updates to the renderer there used to be no preference given to different kinds of updates so when data was scheduled over things like animation it would cause pauses in the interpolation of states which made for a kind of janky visual interpretation in fiber animation gets prioritized over less important things now it's scheduled with requestanimationframe that's becoming a first-class citizen now many of you may be thinking but animations fluff why should we care about it so much the thing about it is that if we improve rendering for animation it improves rendering for every visual expression of state change anytime you're interpolating state you're exposing all of the leaks and intricacies of those Dom dips the updates to fibre help not just animation but rendering all around by being a bit smarter about the scheduling of those updates so now the examples that I'm showing today are not taking full advantage of fiber yet I'll be diving into what you can use now 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 this is a big deal because the our memory store in our occipital lobe works fundamentally in 100 millisecond bursts as humans were accustomed to flow based action not toggling zuv states and by shifting these actions too quickly we lose a certain amount of context so here's what's particularly exciting we all know that react excels at encapsulating any state that's changing and the whole purpose of animation is tying 2 States together with interpolation so not by not just toggling those states and instead exposing the moments in between we build a story that's more that is actually less cognitively cognitively tasking for our users it's as if we're telling the story and in storytelling and in building websites we have something called the so what factor people start off intrigued but their attention span starts to drop off around 2 seconds so Amazon's discovered that after every 1 second delay conversions drop by 7% Walmart founds that it gains 1% revenue increase for every 100 milliseconds of improvement so how do we make sure that we're finding the most clear and useful path in our app from one piece to another if you spend a moment aligning yourselves with what the end goal is it all of a sudden offers clarity for what might happen in between this also helps track what validation looks like react brought all of front-end development together into a new age by understanding how to responsibly manage state this is great because now we have a record for what's changing as a user in a human you're constantly tracking the space around you you're creating spatial awareness this is eye tracking movements on a heat map of one single page we move our eyes constantly in an event called saccade to understand where everything lives that also means that anything that's changes forces us to remap that space and creates a cognitive load if the entire team is lined from beginning to end you can start to connect these states in a way that reduces friction for the user so if we're talking about ways to keep that experience from feeling so jarring we have to discuss animations and transitions without transitions we lose an opportunity the user has to remap every interactive space like we mentioned before and it doesn't feel as fluid here's a great example from code drops we're just choosing your seats at a movie theater you get a real understanding of spatial awareness as a user and it's much more helpful trying to navigate or make a decision I'm biased of course because I've been working on this project but part of the reason why I cleared my schedule for workflow as a client is because I think this project is so cool for react development workflows a place to manage all of your react components it's a living style guide that gives you a productive environment for building components and getting on the same page with other engineers designers and PMS we've been talking about connecting States for the user and this is shown through our walkthrough flow it uses animation to illuminate how to work through the UI and connect these states so you're taking through a few interactions which highlight what you should be paying attention to the dialogue speaks to you like you're a human and establishes a relationship so that you feel at home and that last confirmation screen has a burst to let you know that you're successfully set up so when we talk about connecting these states we have to actually make our app feel faster and easier through perceived performance a couple people have mentioned this before so here's one thing that people haven't mentioned before humans actually overestimate passive wait times by 36% so even if you're using lighthouse or if you're using chrome dev tools and timeline to record things it's not telling you the full story because that actually the way that it feels can change we get did a study that where they did like a kind of custom gift loader and or you know an old-timey gift loader and they did a custom loader which was just some dots on the screen people were willing to wait twice as long for that custom animation even though it wasn't flamboyant or that interesting we also know through MRI scans that if humans have to wait more than four seconds for a UI to load they have the same feeling that they do when they're watching a horror film so uncertain wait times are longer than been known or finite weights and Disneyworld and airports understand that you need entertainment while you're loading so Disneyworld will show you like little animatronic things while you're waiting airports make you walk or really long way to get your bags so that you show up and your bags are there you're like I didn't wait that long even though it's the same amount of time people also want to get started so that's why the doctor brings you into the exam room before they're ready to see you then you feel like you're already on the doctor journey and you're not sitting in the weight room so I made this loader for Smashing Magazine for their checkout experience it's not what the loader itself is not the important part the important part is that the entire file size of this is six kilobytes because I'm using SVG for the graphic and I've optimized correctly and I'm keeping everything terse and small I think SVG is incredibly powerful for dom-based movement and so we're going to talk about that of it today one of the nice things about SVG as a format is it's so flexible it's built with math so we can manipulate it and make it bounce and snap this is a in honor of the yarn release so a lot of people when I work as a consultant think like oh but SVG is not well supported it used to not be well supported it is supported now look at all that green we even have Opera Mini we never get Opera Mini and it says 11 there but this actually goes back to IE 9 so I'm going to take a super brief detour here to clarify what the scalable means when we talk about scalable vector graphics you see here when we place the graphic directly in line in the HTML it has width and height attributes and that keep it to that size but if I take those out you can see the graphic take up all available area and then with styles I can constrain the viewport width and height I can make it fill up the space of a CSS grid or a flex box or anything goes here and the graphic and its innards stay totally consistent so if you don't like positioning with styles SVG is incredible because you can see how stable that graphic is even though there are multiple elements inside it that you can now ax through that navigable Dom so I can even be putting text in there as well so okay we've talked about why it's effective to animate and react and we talked about SVG a little bit now let's get into the nitty-gritty of some things available to you with actual code when we're working with animation we can start to think about certain aspects of the way that we're building our components as the pieces that we'd like to iterate on in this case with the sound visualization I might want to alter things like the timing of the entrance and the timing of the exit so we'll go into more detail about how we built the animation for this component in a bit later but an important piece of this choreography is thinking about things like timing and eases and animation pieces that we can easily change infant in conjunction yeah in conjunction with an entrance or exit timing is incredibly important it's good for jokes it's good for introductions this is a really bad dark UX pattern that you're probably familiar with when you visit Groupon for the first time this modal comes up I'm not even sure I want to use it or if that I'm going to find that site useful and it's already asking me for my information it's like come on buy me a drink first you know if you think I'm being picky know that Google agrees and will now drop your SEO if you have a timed interstitial on mobile so this is documentary footage of me trying to use that site or a lot of other sites on my phone the funny part is we're already used to thinking about building apps this way with text and layout but a lot of times we add animation in in an ad hoc manner that makes it feel inconsistent so one one way that we can easily fix this is to create beautiful defaults and why should we do that it seems like a lot of work huh like who cares well it's the same thing as any other technical debt if you do a little bit of work upfront it's easier to build and iterate in a cohesive matter after that point we can create these defaults for easing for things like entrance exit entrance emphasis and give all of your animations a similar feeling across your whole site no matter the timing and you never have to remember it again right I never have to copy/paste a cubic Bezier ever again I keep plugging into that entrance this helps my teams move really quickly even if the other engineers aren't into animation they already know that they're going to use an entrance for entrance and an exit for an exit we use things like h1 h2 h3 for body copy and we know that h5 is the default that's what our body is all going to be like if we don't set anything else we can do that with timing as well so we can create timing units of t1 t2 t3 and understand that t5 is the the default the typical timing so now we've already created a situation where nobody has to think about eases and nobody has to think about timing they can just think about where the thing is coming from and where the thing is going to and then we can iterate on them right so in creating these beautiful defaults we can have us not just reinvent the animation wheel every time we try to make something we have way less to think about we decide what kind of animation we're using and we can easily adjust timing if we need to so if we think a little bit more about a common UI example here let's say we're building out a card we can create composite components where we're putting these pieces together and even adding a specific animation component that handles the entrance and exit so I love how quickly I can build that out now I'll show you how I created this entrance and exit coordinating react transition group plus and green sock a little further into this talk okay so animation landscape is actually pretty big even though it's just one piece of react and we don't have that much time today so we're going to spend time near the Dom side of things even though it's way bigger and there's way more there we're not going to talk about native and ken wheeler and guns and beer stank and you know canvas and all of that we're going to stay over that in that direction okay so the first library we're going to look at is mo dot J s one thing I like about it is you don't even have to open a graphics editor it has built ins like bursts and swirls you can you begin to use them with just one line of code as you see here and it comes with a ton of SVG shapes so you can just access these and apply them to children of burst or swirl animations and on my personal site I use a slew of these shapes as children of the bursts and within a couple of minutes I'm able to spin up some pretty fun feedback on my form submission on my button for my submission form I decided to create something that's open source so you can dig into how you'd use modeis with react so of course I chose to make the thing that's most useful to you a bursting hot dog probably the most important piece of that whole demo though that I'd like to call out to you is that you should be returning false on should component update that will get you the best performance a few years ago at this very event Chang Liu open source react motion react motion is a really beautiful library that offers interruptible single movements unlike the timing changes we worked with earlier react motion doesn't really work with the concept of time instead it's similar to game based animation where you give something mass in physics and send it on its way here we're working with staggered motion that's unique as well instead of simply staggering the timing we're actually updating each subsequent element from the last ones placement so in essence it's getting that motion for free and we can create these really beautiful interactive effects of course we don't need to make these huge movements either right that's not the most common use case so in this example I have a layout with small stat during animations when we change out those circles as well as some hover events for the text elements so you can also see how we're using SVG here and it's really easy to make it scale for Responsive in an interesting manner without too much positioning craziness in those circles we're updating with a click and we're using a staggered motion component to use the previous styles to then update the next ones placement and in the component itself we can pass in an array of path values give each path a key and update the opacity here's another example of how react motion of react motion network here we're updating many parts of the SVG some with rotation and some are drawing letters onto the page now drawing SVG is not something particular to react motion so let me teach you how to make that work and you can use it in something like react move or any of the other options too so okay imagine that you have a path or a shape and that whole shape has a stroke that stroke is dashed we have a native method in JavaScript that is called get total length so I can get the total length of that shape and then I can make that - the whole length of the entire shape and that dash offset is animatable so now I can animate that - offset and have SVG's look like they're drawing themselves onto the screen so I've already logged the length of all the letters and the to hundred is the maximum value so I can use a ternary to toggle and therefore draw the length of the whole dash onto the page and that's how I created the animation for Trulia's responsive navigation we have react motion updating the stroke with the nav icon on hover and then on click we transform the other pieces to make an X and to open the nav so you can see how fluid that motion is it feels really nice so there's a lot of tools to cover we're going to go quickly through a whole bunch of them right now so just so that I can give you a per view of the landscape I work with all of these tools so I thought I'd break down my recommendations for each of you all of these tools work well they're just good for different types of use cases CSS nsj or styles or something like that are great for small sequences and simple interactions they're awesome because you don't have to load any additional resources but CSS is not very powerful we're updating in two places because we've got our key frames and then we have to apply them so that's not great we also have to chain them by writing subsequently longer delays each time so if you one of them changes you have to go back and change all of the delays that follow so that's not so great that's not such a great workflow especially for complex animation I'll go into depth about this in a moment but green sock is a really really great for sequencing complex movement it's also really good for cross browser stability so it's a great it's great for high quality production sites react motion as you saw is awesome for basic movements you'd like to make realistic but it wasn't really designed for sequencing so you can't really write a loop without writing an infinite loop don't do that so there's a kind of a limit to the kind of interaction that I would use it for react tween is similar to react motion but it does use the concept of time so due to the fact that we're but due to the fact that we're wrapping each element in a motion component it can get very verbose if you're trying to sequence a bunch of elements and events together at the same time we have move is similar to react motion and it also doesn't have a concept of sequencing but the major advantage of react move though is that you can schedule with time or with Springs it's very very flexible people always ask me if I use snap SVG because I animate SVG snap is not actually an animation library it's meant for dom interactions like jquery so if you asked the author dimitri baron offski what he recommends he'll tell you that you should be using green sock and even if you go to the demos on there on that page on their site they're all done with CSS animation web animations API looks fantastic because it will be native to the browser you won't have to add any external libraries it will be good at sequencing but it's not yet well supported and even if you use a polyfill it sometimes breaks as things change because they're still updating the spec so don't put that in production sites unless you like page or duty on a Saturday this will be a really really good tool when it comes out velocity react is similar to green sock but it has slightly best bells and whistles and less offerings so I also ran some performance tests on it and it didn't fare so well but those were run a long time ago so they might not be viable anymore you should really be testing things for yourself mode is as you saw is beautiful for spinning up shapes and creating really really beautiful times types of motion it does have things like timeline and so you can sequence animation and use a curve editor for eases there's all sorts of really cool tools kind of built into it that I don't have time to cover today but it's still in beta so I would keep an eye on this one it's it's pretty close to being released now so one library that comes up again and again when I talk about creating beautiful movement with react is green sock it's been under development for 10 years so it has a ton of offerings including Docs and forums the thing that sticks with me is that it's very tough to find something another tool can do that gee sap can't do but there's plenty of things that jiseop can do that other tools can and I'm going to show you some of those things today so some of the things that we're going to cover our transforms cross browser inconsistencies morphing and sequencing and training so let's talk about transforms first most of you probably already know this but in case you don't in terms of animation on the web not all properties are created equal opacity and transforms cause the least amount of repaints and they're the most performant so transforms offer a ton of ways for you to manipulate elements to like skews and scales so that if you feel bad because it's only one property there's actually a ton in that one property there's also a few ways to hardware-accelerated an element with styles shown here so in here I've made one animation with margin left and one with transforms and you can see the top one that's margin left is kind of jittering around and then if I illuminate in the browser with chrome dev tools the paint flashing you can see that green box is actually illuminating what's not being properly hardware-accelerated and what's causing a lot of repaints so the transforms are doing better than the one on the top which is margins but transforms have a trick of course stacking the problem with transforms is that they stack so if I was going to apply a bunch of different transforms at a bunch of different times and a keyframe animation what would end up happening so if I want that thing on the right heap to happen here so if I want that to happen what will actually happen is the thing on the Left they'll start to stack and create an order which is not ideal and can cause a lot of problems so I have two options I can either wrap subsequent divs or components around each other and that is just like kind of not great or I can write out each little piece and put all of the properties that I'm using in the so I'm like calculating scale 1.23 and scale 0.5 so I'm kind of like manually and like picking the pieces of that interpolation instead of having the computer do it for me so that's not great what green stuff allows you to do is separate out those values so I can actually make many many different tweens on a timeline I can use each one of these separately I also don't have to write transform translate X all of that stuff I'm writing x and y which is not a huge deal but it's kind of helpful they will also assume that you want a hardware accelerate if you're moving something that you're just probably going to want to hardware accelerate so that'll automatically do that for you the other nice thing is that they're not beholden to the spec they you know Java Script is just more powerful than CSS is so what they do here is they're using matrix transforms they also do a lot of things where you can move attributes around as well so that's really really cool to be totally clear react move react motion react tween all of those can do this but you'd have to write a matrix transform and those are not the most intuitive thing to write so that's how this is happening you know that's like what the abstraction layer is up obfuscating for you so if you want to write matrix transforms with these then you'll have really stable you know animations that can do things at different times but the thing green sock allows me to do is animate the unanimity ball like SVG filters it solves cross-browser inconsistencies there's some really weird ones here come on I use just like and that's edge so these are all well supported in green stocking you don't have to worry about them which is just major for production sites it also solves other transform origin issues if you look at the pen on the right that's actually how the spec thinks you want to interpret interpret many many stack transforms that's crazy that's just crazy the one on the left is green saw kind of figuring out that probably what you want to do is you know fix all of these if you wanted to revert to the spec you can do smooth origin false so it's still available to you if you want that kind of behavior but I've never wanted that kind of behavior let's talk about morphing for a quick second one really cool thing is the ability to manipulate SVG and more from one set of path values to another and they don't have to be equal amounts of path value so there are other libraries that do something like this but they have to be the same amount of path values so that's cool but what's more cool than that is that you can actually change the way that that goes you can actually go through and find a different index and you can see how changing the index for this morph completely changes the way that that motion manifests so I can do things like make a candle with SVG which is vector or I can make smoke all right sequences and chaining these kind of things are [Applause] sequences in chaining sequences in chaining are not the kind of thing you think about at first until you start to make something more complex and then your code gets very very easily spaghetti if you're using delays for chaining it's that thing we talked about earlier where you have to recalculate all the values and I've never ever made a longer complex animation where I didn't adjust timing that's just a very normal thing to do otherwise you can use callbacks and you can also enter callback hell which I think we all kind of want to avoid so one great thing about this timeline is it makes us not have to do that it allows us to schedule all of these things so we can stack tweens we can change their placement in time group them into scenes add relative labels so if we want you know everything to fire off of one point in the timeline we can add a label to that playhead and fire a bunch of things at once we can animate the scenes we can animate our animations like one line of code I can change the whole timing of the whole thing we can also reuse the scenes play it backwards and pause that's really good for interaction because have you ever made something like complicated that opens and you just want it to reverse on clothes that's now one line of code instead of writing everything out so here we're instantiating a timeline we're adding a tween at the beginning we're adding another tween immediately after it'll just assume that you want it to follow that and then we have you know an increment err here that's saying like okay a little bit after that one this is actually not showing all of the capabilities of timeline that's just like the very very tip of its capabilities so some of us want to make things like this right now we can make things like this you can see how that circle is morphing into that you know that Square button we now know how to do that we can move things around we can coordinate all these kinds of movements and in figuring out how to do so you can create small storyboards of your existing UI and try to find similar elements that can be simply altered with a transition instead of completely showing another view and breaking context okay so we've dug into how awesome green sock is now how do i pair that with react well often I'll coordinate entrances and eggs it's and give myself hooks with a library called transition react transition group + react transition group + is not react transition group they're similar but it has some unique offerings so here is a comparison of react transition group and react transition group + we have something called in out modes it's pretty common in a accordion or a navigation or other pieces of our UI that we're not just coordinating entrances and exits but we're coordinating something leaving and something else entering at the same time so we can state without callbacks or chaining whether we want those two actions to happen simultaneously or if we'd liked one to wait until the other ones done in order to enter this is a really common use case so we now now no longer have to reinvent the wheel so here's an example of a card flipping it looks like one element but it's actually - one is leaving and the other one is entering so we can schedule one to leave and the other one to wait until it's done and then enter so without those in out modes you can see the picture snap forward instead of transition seamlessly so now we know how to make some pretty cool stuff this is made with react in green sock react coordinates the state and green sock choreographs all the intermediary values so in this example I'm using in like in the state I'm using this idea of screens when we click on the button we can advance the screen looping back around to the first and for each screen we fire a function that handles our animation separately then we hang a timeline off of that function so that we can choreograph and finally tune the way that that move movement works this event was simply our hook so the other cool thing about green sock is that it allows us some methods to clear the properties that are set in line on the elements with clear props so that we don't have to if we need to reach rigor something you saw how that looped all the way around we can do so pretty easily so if we revisit that first example that I promised you that I would revisit you can now guess how we created this animation we worked with green socks timeline to draw those pieces of the SVG on and then hooked into the transition components hooks with component will enter and component will leave to schedule the timeline calls there's tons more stuff there's draggable motion along a path custom easing physics and throw props the sky's the limits here so the baton the main takeaway here is react is amazing at encapsulating the state that's changing animation ties these two States together and with both of those we can create beautiful fluid interfaces I wrote a book this is not that book this is my friend trolling me I don't have the man blob animal that's not my last name this is my book it's available on our I lis now it just came out I'm also giving web animation workshops with Val head we have one coming to Paris in September thank you so much you

Channel: ReactEurope

Views: 21,634

Keywords:

Id: W5AdUcJDHo0

Length: 31min 5sec (1865 seconds)

Published: Wed May 24 2017

Reddit Comments

[u/goorpy]

Her animations blew the audience away. Seriously impressive and she is a great presenter.