While watching Google IO17, I learnt about the double requestAnimationFrame method but i can't really wrap my head around it maybe because i hardly involve myself in animation on the web.
However, i think it would nice to know how it works and when to double things up as in the case of Twitter's tab example laid out by Addy Osmani. Thanks!
Because of the bug introduced in Chrome and some others, we have to use double requestAnimationFrame whenever we find ourselves toggling classes or performing other CSS animations that requires RAF to fire after an action is performed. It's kinda like an escape hatch to have nice/smooth animation.
I saw this mentioned in a Google I/O talk, too (by Owen Campbell-Moore). Here's the link to the video of that talk (in case it's different than the talk you watched:
"Creating UX that 'just feels right' with Progressive Web Apps" https://youtu.be/mmq-KVeO-uU and a link to timestamp where the explanation of what a double RAF is: https://youtu.be/mmq-KVeO-uU?t=805
I did a little digging and found this explanation by Owen in a post on Medium:
"One weird trick to performant touch-response animations with React" https://medium.com/@owencm/one-weird-trick-to-performant-touch-response-animations-with-react-9fe4a0838116
The article also points to a short follow-on discussion about whether/why the need for the "double" approach is a bug or not here:
Hope this helps...
© 2022 - 2024 — McMap. All rights reserved.
