Image for post
Image for post

I have seen many articles on the subject of lazy loading. I think most of the simple approaches struggle if you need 60FPS animations, smooth scrolling, precise control and good browser support. So I would like to share this approach with you — it’s been developed over a few years working on the beoplay.com website and some other projects of mine. But first a brief background:

The problem with one very common approach is to reflow the document on every scroll (which could be 60 times per second), for instance by calling “getBoundingClientRect” or similar. Reflowing is something you want to keep to an absolute minimum. …


Image for post
Image for post
Css media query for prefers-reduced-motion

Lately I have read many articles describing the “prefers-reduced-motion” media query. At first it seems like a great way to detect if users don’t want animations. But when I opened the accessibility menu on my Macbook, I realised that animations were already switched off! Then I remembered doing this years ago, because it saves battery and CPU usage — and my OS is a work tool, an everyday utility, I need it to be super fast. I actually think there are a lot of users like me, who at some point have read or heard that doing this speeds up your computer (both Mac and PC).

About

Michael Vestergaard

Creative code and interaction design at https://iliketoplay.dk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store