I'll focus on Google Chrome for this writing.
#Motion smoothing gif code#
In this guide, I'll explain how browsers turn code into pixels and how we can work with them to deliver a delightful user experience. When a page doesn't respond swiftly to user interactions or has jerky movements, something must be off.Īnd it's usually owing to the browser's main thread being so busy that it can't deliver frames on time (more on this below). In the recording below, I'm moving the mouse over the timeframe to replay the text selection: You'll see an overview like the one above.Įven when you select a piece of text, new frames are displayed as you select more letters and lines. Then, scroll the page for a few seconds, and stop the recording.
While in the DevTools, go to the Performance panel, and click on the record button. I used Google Chrome DevTools to create the above recording. Generated frames during a few seconds of scrollingĪnd as you can see, each frame was displayed for 16.7ms (60 fps). The image below shows the sequential frames produced and displayed during a few seconds of scrolling. When you scroll through a page, the browser displays off-screen areas of the document as you scroll down (or up). Of course, a frame stays on the screen if there's no change.
These changes could be as simple as adding or removing a element or changing the styles of a button.īased on W3C frame timing guidelines, the web browser has to be able to display sixty frames per second (60 fps). In fact, they are sequential images displayed rapidly to give us a perception of motion or simply reflect a change.Įvery time JavaScript code changes the page, an area in the previous image is invalidated, and the browser draws a new one.
Scrolling, pinch zooming, text selection, and even hovering over a button are technically animations and work similarly. We watch various motions every time we're on a web page.Īnd it's not only JavaScript or CSS animations that I'm talking about. What if I told you that web pages were interactive animations played back by your web browser?
0 kommentar(er)
