4 ms·
That should also enable iOS style, scroll-offset bound animations, right?
by 9dev 2y ago
That should also enable iOS style, scroll-offset bound animations, right?
- nikisweeting 2y agoYeah you can do tons of interaction-dependent stuff without losing the GPU-accelerated nature and declarative style of CSS animations. We built a high performance animation library on this concept: https://github.com/Monadical-SAS/redux-time https://github.com/Monadical-SAS/redux-time
- afavour 2y agoScroll 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 2y 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 2y agoThe exception there is hardware accelerated CSS transforms, which will work great.
- rasz 2y ago"hardware accelerated" CSS transforms take ~30% of one CPU thread in Chrome, thats a very specific definition of great :(
- easyThrowaway 2y 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 2y 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.