Learn how to bring animation to your web projects
1–10 of 15 posts
Re: Learn how to bring animation to your web projects
#2Cool 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...
Re: Learn how to bring animation to your web projects
#3Cool 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 th…
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.
Re: Learn how to bring animation to your web projects
#4Cool 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 th…
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!
Re: Learn how to bring animation to your web projects
#5Cool 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 th…
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.
^ 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.
Re: Learn how to bring animation to your web projects
#6Just don't be tempted to add all the animations you can think of after reading something like this (similar to what often happens to other developers after reading about design patterns.) If anything, you should probably err on the side of not using animation.
(Unless it's a game or such, in which case definitely be more liberal with animating things.)
Re: Learn how to bring animation to your web projects
#7Just don't be tempted to add all the animations you can think of after reading something like this (similar to what often happens to other developers after reading about design patterns.) If anything, you should probably err on the side of not using animation. (Unless it's a game or such, in which case definitely be more liberal with animating things.)
Also, if your app or website has settings, please include a setting for them: no animations | reduce animations | enable all animations.
Settings are often maligned in interface design, but they're very important for people who actually use your app often. Instead of forgoing them altogether, ship with good defaults and let the user reset them if things go wrong.
Re: Learn how to bring animation to your web projects
#8Just don't be tempted to add all the animations you can think of after reading something like this (similar to what often happens to other developers after reading about design patterns.) If anything, you should probably err on the side of not using animation. (Unless it's a game or such, in which case definitely be more liberal with animating things.)
Also, if your app or website has settings, please include a setting for them: no animations | reduce animations | enable all animations. Settings are often maligned in interface design, but they're very important for people who actually use your app often. Instead of forgoing them altogether, ship with good defaults and let the user reset them if things go wrong.
There's also an upcoming media query `prefers-reduced-motion`: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...
Re: Learn how to bring animation to your web projects
#9Cool 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 th…
This resource is pretty decent https://medium.com/outsystems-experts/how-to-achieve-60-fps-...
Re: Learn how to bring animation to your web projects
#10Looks cool.