Learn how to bring animation to your web projects

Re:Learn how to bring animation to your web projects by hknd on Thursday November 29, 2018 @06:16AM (#18559427)

Cool that you open-source a book - it looks like it contains a solid amount of information. Well done!

What I'm missing (couldn't find it on the first glance) is a topic about the performance implications of animations. Most devs don't consider which css properties trigger a layout->paint->composite re-render, which has massive influence on browser performance.

There are soooo many shitty animations/transitions in the web, just because people don't know that animations can slow down a whole site.

Imho people should read something like the web dev one pager on animation performance (1), which explains (more or less) how to build high-performance animations.

There is also this free udacity course (2) which explains everything a web developer needs to know. It's not hard nor magic, and you just have to hear it once to remember it for whenever it becomes necessary.

1: https://developers.google.com/web/fundamentals/design-and-ux... 2: https://eu.udacity.com/course/browser-rendering-optimization...

[ Parent | on HN ]

Re:Learn how to bring animation to your web projects by Teichopsia on Thursday November 29, 2018 @08:35AM (#18560029)

This resource is pretty decent https://medium.com/outsystems-experts/how-to-achieve-60-fps-...

[ Parent | on HN ]

Re:Learn how to bring animation to your web projects by the_duke on Thursday November 29, 2018 @07:15AM (#18559636)

It's especially bad with the CSS frameworks that people slap on their sites.

Various Material UI implementations are notorious here because they have fancy animations everywhere.

[ Parent | on HN ]

Re:Learn how to bring animation to your web projects by hknd on Thursday November 29, 2018 @07:30AM (#18559708)

^ this!

I've seen so many jquery libraries used on sites to get a quick fancy animation, but then it used something like: setTimeout(() => { element.height += 2; }, 50)

Which literally brings a 60+fps page to <5fps on a high-end machine.

[ Parent | on HN ]

Re:Learn how to bring animation to your web projects by donovanh on Thursday November 29, 2018 @07:24AM (#18559675)

Yes, I totally agree! Performance is something I will consider touching on. I wanted to keep it fairly intro-level but the topic would sit well alongside accessibility.

Thanks for the feedback!

[ Parent | on HN ]