Sluggishness and slow loading times contribute to a horrible user experience.

Web animations are infamous for being unperformant and janky, especially on mobile. Usually this is because they are animated using css properties such as height, width, left and top which trigger layout.

Changing the layout of pages is expensive for the browser and it is entirely possible to animate without triggering layout changes.

Layout

Layout is one of the steps in the browser rendering pipeline. During layout the browser figures out the geometry of the page. Changing the geometry of an element (such as height, border or margin) can affect the geometry of other elements which in return affect the geometry of yet more elements. This makes layout calculations very computationally expensive. http://csstriggers.com/ is great to identifying which property changes trigger layout.

How can it be done better?

Animate css properties that don't require the browser to perform layout calculations like transforms, opacity and clip. Full screen pen here

This pen illustrates animation techniques used on the Chrome dev summit 2014 website which was developed by Paul Lewis from Google. UPDATE: The 2014 dev summit website has been replaced by the 2015 one but the source can still be found on github.

See Paul's blog on https://aerotwist.com/blog/flip-your-animations/ for more on this technique.

Have a great day an remember that performance is a feature.


6,708 0 4