The thing I like best about his acronym RAIL is that now that we have that, we can describe apps that fail to meet this standard as 'derailed', i.e., a train wreck!
Great talk Paul, thanks. FLIP looks great, but shouldn't we see a "flash" when you set the First and Last states ? Or do you set the opacity to 0 or something to hide it, or is it just too fast for the user to see it ? Second question, in your example you're scaling (via transform) the list item you clicked, so it shouldn't push the previous and following list items, right ? Do you need to animate those separately ? Last question, it looks like Blink is the only rendering engine not triggering layout + paint... so does it mean that those FLIP animations won't work well on those ?
8:40 to 9:41 what is he explaining? Is he explaining how a side navigation that will pop up when a you activate it by clicking something in the app, should render a smooth transition without having to wait for one to catch up?
Pretty much. I'm explaining that when something is display: none or visibility: hidden it will be out of the render tree, so when you set it to display: block (or flex) or visibility: visible you'll pay a paint cost. We want to avoid that cost if we want to have confidence that the interaction won't feel laggy, and the way around it is to set the opacity to 0 and pointer-events to none. That way it's still in the render tree and "primed" for action.
A few questions about the FLIP method: How would you do this if you needed the element to move horizontally? This just moves the element in a straight line and doesn't implement the arc motion defined in the MD spec. How do you deal with situations where you need to make the element smaller than it was originally? This method will scale the element up causing it to blur. How do you keep existing transforms such as rotations (which rely on transform origin)? This is one reason I think transforms need to be split into separate properties for rotate, translate, and scale rather than bundling them all into one.
Fantastic questions! RE: horizontal / non-linear motion, these can work just fine. All you're doing with FLIP is reading the start and end locations and dimensions, and once you apply the Invert transform you're free to "Play" / undo it in any way you see fit. You can also use JS to do it if you really want, which is what I do in the flipjs helper lib (github.com/GoogleChrome/flipjs), and that then opens you up to doing fancy animations with easing functions like bounce... whichever way you do it, you just want to stick to transforms where you can. _How_ you get that done is up to you, and when I show FLIP I always show the lightweight / simplest version, but there's so many ways you can take it, it's really your call what you do. RE: blurring. Yep, so what you can do is spin this on its head, and start with the final, small version and scale it up at the start of the animation. If you do FLIP you're going to be causing layout & paint _anyway_, so you can take advantage and paint something smaller and scale it back up. Because it will start animating immediately I would hope you'd get away with the blurriness, but it's going to depend pretty heavily on the animation itself. RE: transforms. This is very difficult today, but as you say you can use .rotate, .translate and .scale (drafts.csswg.org/css-transforms-2/), but chances are you'll have support issues for older browsers. Certainly Chrome supports this, but I'm pretty certain support elsewhere is poor. Which then points to using a 2D matrix library that can allow you to manipulate the properties independently and allow you to set a matrix for the element in question.
Thanks for the response. :) Glad to see I haven't missed something super obvious then. It's great to see the transform properties are getting their own separate versions. Would be nice if they had separate origins too. If only we could just develop for chrome and forget other browsers haha. I'm currently working on a web app which has a round logo that I'm using as a splash screen. I want it to animate it upwards and scale it down to sit on the toolbar (if the screen width is wide enough) as if it were a floating action button. Unfortunately, as it starts out at around twice the scale of the final position, the blurring is really quite bad so I can't get away with it. My first attempt at JS rAF animation didn't look too great as I tried animating the translate and scale separately. While it gave the nice arc effect I want, it looked 'wrong' as the scaling completed after the translateX had completed meaning the left side of the logo would move over past the end point and then bounce back to it. It's obvious I need to think about it as if the top, left, bottom, and right are changing instead of its scale and position so I can animate the properties separately and they don't pass their final position. The way I'm attempting it at the moment is to record the first, add the class, record the last, and then remove the class, animate, and then re-add the class again to set the final position. Not really ideal but it keeps the actual animation at a consistent framerate and I can always look for a way to optimize it later on. I now need to actually get the properties to animate which means I'll need to play around to choreograph the animations. The only issue I'm having now is actually implementing easing. It's easy to implement symmetric easing as you can just have a function that takes in the current time and gives an adjusted value. Something like function ease(t) { return 3*t*t - 2*t*t*t; } will give a nice smooth curve. The issue is getting a asymmetric curve like cubic-bezier(0.4, 0.0, 0.2, 1) without adding 500 lines of js porting the webkit implementation of css bezier curves. I'm hoping I can find a way to approximate that one curve in a simple function like the one above. Seems like its gonna be a case of trial and error to get it all to look right. *Edit* I am also now wondering how you deal with the child elements issue. Is there a simple, preferred way of doing so? My first thought was to apply the background and other effects to a :before pseudo element and have that do the transform and scaling with the other elements in the parent above it adjusting their opacity and translating as needed.
In regards to the FLIP caveat of child scale: Would an inverse transform on the children be a fitting solution or does that have it's own caveats? i.e. .flipScale { transform: scale(2); } .flipScale > * { tansform: scale(0.5); }
Is the old translateZ(0); hack blink / firefox specific? If no, it seems like we still have to use it instead of the smexy new will-change because of the IE-victims. And possibly Safari.
+Pesthuf Safari has will-change now (developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html - search for will-change). AFAIK in IE it's a noop.
Yeah, I noticed. I watched some talks from the edge summit. I love that the new team is pretty open about the development of Edge and actually listens to the community when it comes to choosing which features to implement next. I'm really happy with this and the fact that it's automatically (and kinda forcibly) kept up to date via Windows Update. It's only IE and the fact that it will be around for long that I have a problem with. Don't really feel like using Polymer as long as it takes like 8 seconds for the polyfills to bootstrap the application...
I just found out about progressive webapps, this ui-element performance is amazing on mobile (Native like) I was wondering how would i use these in react/redux. Any suggestions or links to guide would be greatly appreciated.
+Paul Lewis I tried using Material-ui for react in a react/redux app to add UI-element in my PWA however, the performance is laggy on the components I tested(i.e drawer). comparing www.material-ui.com/#/ (drawer) on mobile device using slide to close vs. voice-memos.appspot.com/(drawer) on mobile device the difference in performance is higly noticable. Is there any update on the guide of achieving this performance in a react/redux app?
Every time I see ur video, I feel useless on myself.
Saw this already a while back, still feels something new.
The thing I like best about his acronym RAIL is that now that we have that, we can describe apps that fail to meet this standard as 'derailed', i.e., a train wreck!
Great talk Paul, thanks. FLIP looks great, but shouldn't we see a "flash" when you set the First and Last states ? Or do you set the opacity to 0 or something to hide it, or is it just too fast for the user to see it ?
Second question, in your example you're scaling (via transform) the list item you clicked, so it shouldn't push the previous and following list items, right ? Do you need to animate those separately ?
Last question, it looks like Blink is the only rendering engine not triggering layout + paint... so does it mean that those FLIP animations won't work well on those ?
at 8:38 that figure means what? is it a layout or an animation when the mouse Is hovered?
also
8:40 to 9:41 what is he explaining? Is he explaining how a side navigation that will pop up when a you activate it by clicking something in the app, should render a smooth transition without having to wait for one to catch up?
Pretty much. I'm explaining that when something is display: none or visibility: hidden it will be out of the render tree, so when you set it to display: block (or flex) or visibility: visible you'll pay a paint cost. We want to avoid that cost if we want to have confidence that the interaction won't feel laggy, and the way around it is to set the opacity to 0 and pointer-events to none. That way it's still in the render tree and "primed" for action.
Just realized this during my second viewing of this: At 16:10, shouldn't it be `translateX
A few questions about the FLIP method:
How would you do this if you needed the element to move horizontally? This just moves the element in a straight line and doesn't implement the arc motion defined in the MD spec.
How do you deal with situations where you need to make the element smaller than it was originally? This method will scale the element up causing it to blur.
How do you keep existing transforms such as rotations (which rely on transform origin)? This is one reason I think transforms need to be split into separate properties for rotate, translate, and scale rather than bundling them all into one.
Fantastic questions!
RE: horizontal / non-linear motion, these can work just fine. All you're doing with FLIP is reading the start and end locations and dimensions, and once you apply the Invert transform you're free to "Play" / undo it in any way you see fit. You can also use JS to do it if you really want, which is what I do in the flipjs helper lib (github.com/GoogleChrome/flipjs), and that then opens you up to doing fancy animations with easing functions like bounce... whichever way you do it, you just want to stick to transforms where you can. _How_ you get that done is up to you, and when I show FLIP I always show the lightweight / simplest version, but there's so many ways you can take it, it's really your call what you do.
RE: blurring. Yep, so what you can do is spin this on its head, and start with the final, small version and scale it up at the start of the animation. If you do FLIP you're going to be causing layout & paint _anyway_, so you can take advantage and paint something smaller and scale it back up. Because it will start animating immediately I would hope you'd get away with the blurriness, but it's going to depend pretty heavily on the animation itself.
RE: transforms. This is very difficult today, but as you say you can use .rotate, .translate and .scale (drafts.csswg.org/css-transforms-2/), but chances are you'll have support issues for older browsers. Certainly Chrome supports this, but I'm pretty certain support elsewhere is poor. Which then points to using a 2D matrix library that can allow you to manipulate the properties independently and allow you to set a matrix for the element in question.
Thanks for the response. :) Glad to see I haven't missed something super obvious then. It's great to see the transform properties are getting their own separate versions. Would be nice if they had separate origins too. If only we could just develop for chrome and forget other browsers haha.
I'm currently working on a web app which has a round logo that I'm using as a splash screen. I want it to animate it upwards and scale it down to sit on the toolbar (if the screen width is wide enough) as if it were a floating action button. Unfortunately, as it starts out at around twice the scale of the final position, the blurring is really quite bad so I can't get away with it.
My first attempt at JS rAF animation didn't look too great as I tried animating the translate and scale separately. While it gave the nice arc effect I want, it looked 'wrong' as the scaling completed after the translateX had completed meaning the left side of the logo would move over past the end point and then bounce back to it. It's obvious I need to think about it as if the top, left, bottom, and right are changing instead of its scale and position so I can animate the properties separately and they don't pass their final position.
The way I'm attempting it at the moment is to record the first, add the class, record the last, and then remove the class, animate, and then re-add the class again to set the final position. Not really ideal but it keeps the actual animation at a consistent framerate and I can always look for a way to optimize it later on. I now need to actually get the properties to animate which means I'll need to play around to choreograph the animations.
The only issue I'm having now is actually implementing easing. It's easy to implement symmetric easing as you can just have a function that takes in the current time and gives an adjusted value. Something like function ease(t) { return 3*t*t - 2*t*t*t; } will give a nice smooth curve. The issue is getting a asymmetric curve like cubic-bezier(0.4, 0.0, 0.2, 1) without adding 500 lines of js porting the webkit implementation of css bezier curves. I'm hoping I can find a way to approximate that one curve in a simple function like the one above. Seems like its gonna be a case of trial and error to get it all to look right.
*Edit*
I am also now wondering how you deal with the child elements issue. Is there a simple, preferred way of doing so? My first thought was to apply the background and other effects to a :before pseudo element and have that do the transform and scaling with the other elements in the parent above it adjusting their opacity and translating as needed.
In regards to the FLIP caveat of child scale:
Would an inverse transform on the children be a fitting solution or does that have it's own caveats?
i.e.
.flipScale { transform: scale(2); }
.flipScale > * { tansform: scale(0.5); }
Cool stuffs! Mobile Apps are moving to web apps
Great talk. Thanks Paul.
Is the old translateZ(0); hack blink / firefox specific? If no, it seems like we still have to use it instead of the smexy new will-change because of the IE-victims. And possibly Safari.
+Pesthuf Safari has will-change now (developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html - search for will-change). AFAIK in IE it's a noop.
Nice. It's amazing how quickly the web moves forward now that all web browsers are evergreen.
...Except for IE.
+Pesthuf Edge is pretty great, the Microsoft team seem to pushing on with stuff that matters to developers.
Yeah, I noticed. I watched some talks from the edge summit. I love that the new team is pretty open about the development of Edge and actually listens to the community when it comes to choosing which features to implement next. I'm really happy with this and the fact that it's automatically (and kinda forcibly) kept up to date via Windows Update.
It's only IE and the fact that it will be around for long that I have a problem with. Don't really feel like using Polymer as long as it takes like 8 seconds for the polyfills to bootstrap the application...
great talk
? where can i find the source code for expand and collapse
I need to add it to the repo, but in the meantime you can find it at github.com/GoogleChrome/flipjs
Added it to googlechrome.github.io/ui-element-samples/
I just found out about progressive webapps, this ui-element performance is amazing on mobile (Native like) I was wondering how would i use these in react/redux. Any suggestions or links to guide would be greatly appreciated.
I should give it a go and see if I can make it work. Give me a couple of days.
+Paul Lewis thank you, that would be awesome.
+Paul Lewis I tried using Material-ui for react in a react/redux app to add UI-element in my PWA however, the performance is laggy on the components I tested(i.e drawer). comparing www.material-ui.com/#/ (drawer) on mobile device using slide to close vs. voice-memos.appspot.com/(drawer) on mobile device the difference in performance is higly noticable. Is there any update on the guide of achieving this performance in a react/redux app?
Is this dude just wearing socks without shoes
+Jacob Mischka Jake Archibald has finally got to him
+Jacob Mischka It is an excellent presentation, it does not matter.
+Elvis Hektor Ratzlaff Koop It is good yeah but still
+Jacob Mischka Whatever makes you comfy, you know? :)
Asking the important questions.
the demo is github.com/GoogleChrome/ui-element-samples ?
Why they have MacBooks??? They have to use CHROMEBOOKS
+gamer 1208 chromebooks aren't really meant for or good at developing on. and they don't have to use anything
+Jacob Mischka there is a chrome app by Google called chrome dev editor, and a web server called chrome web server
Man, Paul has a shiny head!
True story: they put make up on me when we record videos at work. They should have done the same here!
go on google I/o!!!!! :)
when i grow up i want to be @aerotwist