3 ms·
Scroll linked animations are the best way to do that: https://web.dev/shows/http-203/Qf5wdXOxW3E https://web.dev/shows/http-203/Qf5wdXOxW3E Sadly no Safari su
by afavour 3y ago
Scroll linked animations are the best way to do that:
https://web.dev/shows/http-203/Qf5wdXOxW3E https://web.dev/shows/http-203/Qf5wdXOxW3E
Sadly no Safari support yet.
(attaching an active JS event listener to scroll is considered bad because it means your scroll movement gets tied up in the JS event loop. On a fast device it’ll probably be fine but on a slower one things can start getting choppy pretty easily)
- easyThrowaway 3y agoUnfortunately if you're doing any sort of DOM manipulation linked to scroll events it will cause stalls in the main rendering thread, at least on Chrome, and slow down even on faster machines.
- afavour 3y agoThe exception there is hardware accelerated CSS transforms, which will work great.
- rasz 3y ago"hardware accelerated" CSS transforms take ~30% of one CPU thread in Chrome, thats a very specific definition of great :(
- easyThrowaway 3y agoI should check it on a more recent release, but at least on Chrome 80-ish and earlier CSS transforms were evaluated fully in software mode when blending filters or transparency effects were active, at least on mac os.
- afavour 3y agoThat’s not what I’ve observed. But in any case, the point in the context here is that such CPU usage doesn’t tie up the JS event loop.