Make Your Animations Perform Well

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Explore techniques for creating smooth and fast web animations in this JSConf Budapest 2017 talk. Delve into the browser's rendering process, learn where to look for optimizations, and discover best practices for implementing high-performance animations. Gain insights on CSS vs JavaScript, browser painting, layout, layers, and compositing. Understand the importance of the 'will-change' property, transformations, and the FLIP technique. Master the use of requestAnimationFrame for serving frames within the crucial 60-millisecond deadline. Learn to leverage browser developer tools like the Timeline tool and Layers tab for testing and optimizing your animations. Elevate your web development skills and create delightful, performant user experiences through efficient animation techniques.

Syllabus

Introduction
My story
Living room
Chairs
Dont use them
CSS vs JavaScript
Browser paints a website
Layout
Layers
Compositing
Changes
Why
The problem
Will Change
Give a browser a moment
Too many layers
Use will change
Flippityflip States
Transforms
Why use transforms
Where to use flip
Serving the frames
The 60 millisecond deadline
RequestAnimationFrame
How it works
Test your animations
Timeline tool
Layers tab
Firefox
Summary