Paul is a Design and Perf Advocate
When making expand and collapse effects you can use scale transforms to keep your UI performant.
When used judiciously paralaxing can add of depth and subtlety to a web app.
The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work.
Support for canvas.toBlob set to land in Chrome 50.
Support for image decoding in workers set to land in Chrome 50.
Tired of jittery scrolling? Great, because Chrome 49 is shipping with a new smooth scroll right out of the box!
An update to the History API to prevent unsightly scroll jumping.
requestIdleCallback is new performance API for scheduling work when the browser is idle.
Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible.
Layout is where the browser figures out the geometric information for elements: their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work.
Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
Compositing is where the painted parts of the page are put together for displaying on screen.
The story of building the Chrome Dev Summit site.
A brand new API is in the works to help measure frames per second in the wild, but it needs your feedback.
Learn how to animate between two views in your apps.
Animations must perform well, otherwise they will negatively impact the user experience.
Learn how to animate modal views in your apps.
Go offroad and create totally custom animations for your projects.
Learn how to soften and give weighting to your animations.
Get a better understanding of animations and their use in modern apps and sites.
Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.
Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!