Cheng Lou - The State of Animation in React at react-europe 2015

the display is kind of weird oh it works now by the way I love Babel and I'm a little bit of a late adopter but you know after two days of using Babel I just couldn't go back anymore and I was like there's no way I'm gonna write the normal JavaScript anymore no way it's like CoffeeScript the good parts basically just kidding just kidding just kidding boy alright so the state of animation in react alright last time I'm gonna do this I promise I started my career with flash I wasn't a coder back then I was just literally some kid dragging and dropping some keyframes in flash and making tweens manually and sending out the curves and make you some small animations and back then was really easy it didn't require any code basically you could put some you know stop go to and play this frame in in the timeline directly and there's like global mutable state everywhere and it was really dirty but it got the job done and I as a matter of fact I remember very fondly one of the first question and this is not a lie one of the first question that came to me when I first saw Facebook back then is you know why isn't it made in flash that was very really naive and I think like I still have this kind of mentality it's very naive but I would like to see that I'm I don't mean like pervasive emanation like these all the time but like at least a little bit more interactivity so that the web as an app platform doesn't still look like you know pages and pages of PDF document lengths with like blue links right so someone agrees with me right awesome talk to me later so two years ago I stumbled upon react by accident and of course I felt like it was the right paradigm from from the beginning but there's one important question obvious one this is one of the first animation issue if not the first animation issue about react and I was basically contributing to this bootstrap example and I realized it's really an inconvenient we react is good enough to wrap these kind of things in animation the API is like velocity or jQuery but ultimately it didn't feel very react and maybe that is the wrong thing maybe that is not so ever since then in my spare time I've been trying a few animation API is looking into other alternatives getting inspirations from flash and etc and I think today I will present you to some of my findings you might find them interesting so and I wanted to know how to do in react and Spencer had a talk yesterday Spencer is a colleague of mine and we talked a little bit on like how to make this work because we don't want to start on the wrong foot by releasing you know to animation libraries imagine if there like to react routers or something like that yeah his library is gets it's performing at least relatively speaking it is performing and it can be even more performance it's very pragmatic and realistic like you can see how you do things and if if the need ever arises you can drop to the more imperative level and do your dirty manipulation to get the job done which is the most important part I on the other hand I am more interested in some of the more abstract attributes of animation and tweening and you will see that very soon what I mean and a little bit of a warning before going going into the actual animation API react is not done right we're at a very good place right now but react it's only been 2 years in the open source and as such animation like the exploration of the animation API is not done there are huge libraries like green socks that are just dedicated to animating things and what we're trying to do here is basically saying you know what we can do almost like 90% of the use cases we can reduce them into one single component this is very hard and it might not be realistic we'll see so the two aspects I want to focus on in this talk is first how to declaratively Express twins as little state as possible as little imperative manipulation in the lifecycle events as possible I am NOT trying to solve making 30 second animation and a scene you know on the web or there are other api's for this and I feel like for these kind of things for these kind of more imperative way of doing things it is already a solved problem so it doesn't interest me and people have solved it better than I ever could and the second aspect I want to talk about is this right thanks to Dan on Twitter for providing me the picture I notice the very nice touch on the art that surpasses the border to indicate it's actually good CSS Oh more seriously I need to find a good API for a mounting and you need to realize something beforehand is that a mounting animation animation general are two different things and mounting is really a react specific problem right now you keep an old around even though in the next render you basically say you know what the node actually doesn't exist anymore and this this basically has nothing to do with animation right but we bundled them together and this is what I'm gonna do - we bundled them together because usually you do that because you want to animate something before actually killing the node but these are two separate problems so a little bit of prior art we have CSS transition on the web right I don't think it's in not and I will explain to you why I started the exploration of animation because it's not enough so first a big flaw in CSS transition is that it's mostly time-based and when you talk about time-based things and when you hard-code the value of like say 500 millisecond into your tween it doesn't vary or anything you have to do 30 manipulation if you want to change your time but why would you want to change the time in the first place well here I'll quote someone who's much more experienced and has more much more credibility than me he is the former engineer on UIKit adapt and he basically says animation APRs api is parametrized by for example duration and curve are fundamentally opposed to continuous fluid interactivity because think about it a little bit let's say you have a menu deploy animation and this is the final destination and this is 500 milliseconds right and halfway the user clicks on something at you toggled it back to this initial hidden state so why should this way back also be 500 milliseconds right what should the curve even be is it supposed to be a normal like ease out animation using whatever linear it's not very clear and the second thing about like CSS animation instead it's very hard to control you don't have actually a dedicated a PR for say pausing or rewinding if you ever need and the reading into the value right because right now it's like a black box you set a final state and somehow Defenders animates for you so a little bit of thought experiment for you what if you do like the arm thing to do and VC thing where you freeze that your API sorry freeze your application Midway can you read into that value or can you not read into that value can you see realize your application stage with CSS animation unfortunately you can't right now and also rely on some Dom it's it's a big big note for me because we want this to be cross-platform for one and also you can have a nice API but like you know from from experience you can have a nice API and you attach the dot to the Dom and everything just it's like poisonous spreads basically it's like you have such a nice thing but now it's it's not nice anymore it's mutated and it's hard to control and it's not nice but that being said there are some good parts to the CSS transition API and the keyframe API it is very performant this is it's kind of hard to be hard to beat the browser vendors are basically cheating they said you know we could use the GPU for this and they're right it is very performant and if my animation API ever runs a ten frame per second I'd rather just use less fancy CSS animation my whatever 30 manipulation I need to get a job done it is good enough with a common task in the sense that you know you get 80% done by with 20 percent of the effort and of course for for those animation where you just it's kind of in the fire-and-forget model which is like for example Instagram why you double tap on a picture there's a heart that pops up and that's it like a second after you don't see anymore you don't care anymore and this is a good model for it so without further ado here is the first demo of the new declarative API I've made cut heads alright these are actually the usual div you used to you know style your navigation bar whatever and it's crazy how far we've come basically this is using purely spring based animation and the code is like actually the actual significant amount of code is less than ten lines I would say the source is online I will post a link later and as you can see I have a few tricks up my sleeve I have this one hack button here which when I press it it slows down everything so it looks like this so now you can actually see the curve I'm gonna accelerate and when I point here it goes here put the one I come back here that actually drags things and the second one is dragged by the first one third one is dragged by the second one and you basically a staggered animation for free and staggered animation in general is something that you think would be hard-coded you know 100 millisecond of the first one let's fire the second one then let's fire the third one but here you get it naturally from the physics of the spring and the final destination of the second chat head is simply the current destination or the first one there's really nothing more to that all right pretty cool I could play with this for days back to the slides now here are my more specific criterias for these kind of declarative tweens they must be interrupted right they must be concurrent they must be composable it's it's so very general but so these are the criterias I have and uninterruptible animation I feel like it's more of a liability than anything else it's my it might be better if you don't have any mission at all rather than having like uninterruptible animation that lasts for like one second during which the user can click on anything conquering is many at the same time so one of my first public experiment an experiment on this you might have seen it it's called twin state it's basically mixing a very simple mixing that does one thing it injects this method called twin state into a component so instead of set state you say twin state and you pass the the key you want and then you pass a configuration object the API is not very relevant here but you get the idea and it basically twins this thing from one place to another insult directly setting it discretely and just to put a little bit of a spin on this I put additive animation which is the iOS 8 new to fall into twin state and the blue bar the blue cube is additive animations effect the yellow one is the normal animation you would get on the web right now as you can see the second one is is much smoother for zero costs it basically says you know we have these two curves together one is like this one is like this and we're gonna use the power of math to blah blah a blend these two together and make a smooth curve so you get this for free for tween state it's just a really nice thing to have for free basically you get like a physics if they even though if you're just using you know easing out here's the API it's no pretty low level right it's a mixing so I'm mixing our beginning deprecated so we got to find a better way to do this but that was a long time ago and so you have this duration and curve which are a little bit uncomfortable and like I said I don't want them there at all and I think today I found something maybe strictly better than twin state and as you saw in the first demo it's a spring it's nothing but one single spring with like configurable parameters so spring has some nice properties to them for one they basically say you know I don't care about a current position give me the final value I know what the current momentum is I know all the stuff that's happening give me the final value and I will do my best to Emily physics and like actually give you a real curve you guys saw that in the demo from stance or yesterday basically I don't think I need to go into too much into that and basically the parameters which have good default in my library is the stiffness and damping if you provide your stiffness as stiffness and damping to this component you will actually animate as if you're manipulating a spring sorry testing oh I can't hear the difference sorry so here's the API it's worse Oh too close Oh oops I thought it was okay so here's the API of the spring you you have values which represent a final value and the final value basically you can pass an asset object so this is the most basic level right this is a good default in my opinion and here's something very interesting it has nothing to do with animation but basically at you as you pass a children callback which you in which you receive the current value that's being interpolated in this case it will be the object with Tod let's say equal to five point five six or something like that and you render it and basically in the background in the in the spring component I do I request animation frame for you until we're done and you can use this simple number to do something in this case is necessary object what if you want a better API what if you want final control over this right you don't want to animate left you only want to animate the top value I'll let you keep your data structure and I pass I asked you to pass me a function with a queen and the twin basically is a marker that says you know which which probably I want to animate and I will animate that whole subtree of Nesta stuff and of course you can get more powerful than that the third the second and third parameters are stiffness and damping you could play around with it basically alright another demo you guys like demos right so this is the motes anti-climactic demo ever look it's a counter alright next demo this is basically 20 state what I talked about right so the first one is the really dumb animation don't ever use that please second one is the CSS animation and the third one is the additive one with the same curve as the second one and as you can see there's a little bit of physics property to it they finish and start at the same time but it feels like more real and you get it for free alright more demo I basically cut basically copied Spencer around this one and you agree that it's okay I think so and also two for a candy I kind of put a dash of a fake dynamic shadow in there for fun and this code for this is actually like a promise very declarative very concise you specify the final position and somehow everything just works I know someone in the audience right now is screaming you know let's do the slow motion thing so let's do the slow motion thing right they all work there's no bug possible if you write it in this way they are all concurrent pretty cool huh and back to reality all right that's the second demo cool so with this you can actually do layout animation because you're just using numbers right and where it's strictly in JavaScript land and layout animation for you there's a good library for that called CSS layout that you guys probably all know basically gives you flex in JavaScript so we can do all the dirty manipulation it's basically absolute positioning right you can read into the value like I said which is very important and now we're at a mounting twins the big problem in react basically so ordinary animation is easy because when you think about it you have the previous render tree you have the next render tree and there's a one-to-one correspondence between this node and the next node so it's very easy to to you know map and interpolate but what if the tree looks different now it's harder and I actually think this might be one of the worst case scenario for react somebody please prove me wrong mounting animation here the criteria are still interrupted concurrent composable basically what's not a CSS transition right now the opposite of CSS transition group well the problem with the current CSS transition group is that it's uninterruptible there's only one in our configuration it's kind of buggy not much control over the things so I think like a demo speaks better at that word so here's a new demo I basically took to do MVC and I say you know what let's literally just put any mounting animation on it okay so and also when I type I actually filters through the list just to show you some better animation I guess let's let's try plpl should match the first element plain look they actually amount and they come back and if you press the slow-motion key let's say I push on the demo right and more and when you DM out actually transitions back these notes keep their state until they transition back it's actually the same note so I mean it's it's it's pretty fun I guess and I feel like as an aside this should probably be the new benchmark for to the MVC a to the MVC is kind of representative in some way of the current state of JavaScript frameworks and if you don't put actual animation on there I feel like we're very static to do this is not a way to go maybe that's just my personal opinion though so the the API actually looks like this for for the spring so it's a super set of trends of the the normal spring it's a transitional spring you might be familiar with this API a little bit if you use transition group already so you know value is the final value still I pass a function doesn't matter what it is will leave because you will leave will enter gives you a lantern this is basically it and further down the line you had you see will leave I basically pass you the key that's currently a mounting key is very important that's the identity of the components and if you according to some criteria you want to make it actually disappear right now you just return though otherwise you return a data structure that I will merge back in through your values correctly and then you could keep animating in the current value children callback I think it's actually pretty intuitive to work this way it just merges back and you can specify your merging algorithm you can basically get lots of power all right demo just pull up demos demo for let's go oh it's actually still transitioning let's stop this oh and of course all these just work naturally right back to completed you know and you can create items I think it's broken oh no it's inactive sorry Hey all right then we'll number four so this is a little photo gallery application I create a view I created this when you track this it's gonna switch photo but it's gonna switch photo in a very nice way design issue a look and you basically get this for free try to design CSS animation by the way if you can do it like tell me anyone want to see the slow motion button yay slow motion button is actually pretty cool on this one look it just transitions correctly it's pretty cool look no more demos actually sorry five more minutes till now the big question is performance how performant is this I personally prefer like I said dumb 60 frames per second animation rather than a fancy one the last 10 that has like 10 frames per second and ultimately you're still rear end during this nested tree at 60 times per second which is expensive Spencer's version is more constrained in a good way in the sense that with that constraint API he can actually compile to you know core animation or refer to CSS keyframe under the hood mine can't this is this is the truth maybe if I constrain the API and maybe I can but maybe it's not a good idea to constrain the API too much we don't know yet we're gonna find out so please file some issues so that we can know what you actually want whether what you're 90 percent use case looks like I kind of lied that there's no more demo so here's what I find to be one more thing of animation demos I also kind of lied when I said there is more animation demos there is none it's just a twist on the current demos so let's go back to demo number one I have more than one hacky actually I have a few hacky cheese anybody know Brett Victor my hero and and he basically said animation is something it's not just animation in general a process in time it's very hard for humans to visualize because it's a process in time and it's a better way to do it would be to map time to space right how do you map time to space for animation everybody will anybody work with a flash onionskin before all right look at this now so you can basically see all the current position out the next 10 or 20 current position my thing is gonna be at and if you put this with like slow motion and gives you like this you don't see that you you don't see the frames anymore because like they are all very close to each other but this is basically the effect right pretty smooth huh all right and you want to see something even better than this running out of time though all right let's see for that no this is bad this is bad let's close them nobody wants just like counter duplicating itself so that's it for this one look now with the slowdown it's actually pretty cool well actually you should you still don't see much I guess but look very expensive motion blur alright let's skip this one and let's do this one and very quickly I guess whoa what's happening here enough let's do this all over again with us hack number three hack number three is a spin on the arm undo thing so look what is this can anybody imagine what this is it's a slider alright let's press it this is the previous state of the animation so what I mean more abstract research I mean it so this is the next the future of your animation you should start from this point onward you can put this back I guess and let's do it on this one and let's just finish with this one two three okay this is animation getting used to it right all right let's see what happens well it's kind of predictable look and you can interrupt here and you probably can drag things here and you'll look like this it's kind of hard to visualize after a little while but you're basically changing changing in the future here right that doesn't make much sense in a real life this is a hack right but the code is actually surprisingly clean it's very simple I instead of doing this in requestanimationframe in the render function I basically take the next ten elements and reducing to one single thing on the current render out of time almost oops by the way I need to thank Dan and Benjamin and the Sunil and Dustin and the whole reacting for letting me do these kind of stuff if there are a few more open issue on react bugs that are now solved it's probably my fault for fiddling with these kind of stuff instead of actually being productive and fixing react bugs animation so far hasn't been easy really it's it's something that we're still trying to explore because as Ray I pick under reacts new paradigm and you know what's the future of these api's okay I can give you a glimpse of some of the other experiment I made what if instead of one set state you do set States and you pass an infinite stream of all the states you want to set so with this API you basically at full power over you know what you want it's basically flash animation frames right alright not too much on this one and then basically on Twitter posted something really funny and he basically said you know what I'm gonna put my to animation States in an array literally and I'm gonna pass it say to a component and the component will take the first state and then then the next frame it's gonna take the second state and with the CSS transition and with reaction reconciler this actually just works and as a closing thought I have no regret deprecating my api right now this is all online live right now I will polish the readme tonight but if someone here can present me a better API I am ready to deprecate this api tonight or tomorrow I'm very serious about this and because like I said animation is not done and I don't want a cargo card a coat on like you know or spring animation this is the future of everything now I don't want that to happen and and it's very hard to see what's belong if we're satisfied with the current state of animation right now and this whole demo which is very light on code snippet is an indication for you to to see what's beyond just normal CSS transitions right now and proposed ap is especially for unmounting api's people rap velocity and jQuery all the time before I'm mounting I haven't seen many that solve that problem so please file an issue here and I will do my best to respond to you thank you

Channel: ReactEurope

Views: 114,436

Keywords: JavaScript (Programming Language), react.js, reacteurope, Web Development (Interest), Programming Language (Software Genre), Paris (City/Town/Village), animation

Id: 1tavDv5hXpo

Length: 29min 51sec (1791 seconds)

Published: Fri Jul 10 2015