Animation performance - Tobias Ahlin
-
Spinkit animations lib
-
animate with transition or with the animation prop
-
animation prop is a set of keyframes
-
opacity, transform, filter are GPU accelerated (use them)
- don't use top use trasnalteX
- don't use width use scaleX instead... and go on
-
Example: background animation:
- use a psudo element and transition the opacity of it
- box-shadow hover, create a psudo element much bigger and animate the opacity of the psudo elemment
-
will-change: effects start & end of the animation
-
use will-change tp prepare the browser for the animation
-
Resorces:
- FLIP - Paul Lewis
- useyourinterface.com
- cappativate.co