How does double requestAnimationFrame work?

Question

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 animat

Answer 1

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

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:

https://medium.com/@owencm/well-there-are-definitely-issues-here-ordered-least-significant-to-most-1f0931b03024

Hope this helps...

Answer 2

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.