ReactJS component that uses the
<canvas> to improve performance.
Ignore all the accessibility issues with this for a second and think how amazing that is.
The below image is Flipboard mobile in action. Notice how it doesn't drop below 60fps at any point.
Animations are fast and so is rendering. You can scroll through a list with animations happening at the same time and not drop a single frame.
Repaints in the browser are expensive operations. It's drawing every single element again. All because you changed a single CSS property. NOT COOL!
Think about what CSS properties you are animating or changing.
Can it be done with
opacity? These two properties help greatly with 60fps!
Check out CSS triggers to see what triggers repaints.