This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

Applying the rule of least power in practice

Description

Some asked <a href="https://old.reddit.com/r/web_design/comments/wvel18/is_there_a_js_library_that_animates_the_text_word/" source="Reddit" author="DemDavors">is there a js library that animates the text word by word like shown?</a>. A bunch of people answered "just do it with CSS!" and one or two recommend using <a href="https://greensock.com/gsap/">GSAP</a> (Green Sock Animation Platform). I'd just heard about that library in the following instructive video and had had a chance to investigate how it works. <media href="https://www.youtube.com/watch?v=8q_05PUYv1o" src="https://www.youtube.com/v/8q_05PUYv1o" author="Google Chrome Developers" caption="FLIP animations | HTTP 203" width="560px"> I'd like to expand on the comments recommending to use the "rule of least power". They are absolutely correct, but you have to consider the entire task: <ul> Learning <i>how</i> to use CSS for this task Writing maintainable CSS to execute this task </ul> For those who already know how to do this and are trying to limit JS as much as possible then, by all means, use CSS only. For anyone else, "least power" means using CSS where possible, but not necessarily excluding JS if doing so improves maintainability, enhances developer speed and accuracy, and reduces errors. If you look at what GSAP does, it generally maps a high-level JS animation API to CSS animations and transitions. The concession you've made is to include animations using a relatively thin layer of JavaScript. That thin layer, though, is a change in technology (more power), which ensures that the animations will no longer work if JavaScript is disabled. <i>However</i>, you're actually using CSS animations under the hood, benefiting from the high-level and highly optimized implementations in the browser. So you've lost flexibility as far as user agents is concerned, but the performance is the same, and you've probably saved time debugging and tweaking the implementation. That might be a better balance for those developers who would have no idea how to animate the given example with native CSS. If they did that, they would have to first learn how to do it, taking up a lot of time, to say nothing of that they might end up creating a suboptimal implementation, both performance- and maintenance-wise. Telling someone to "just use CSS" is <i>technically</i> correct, but also sounds a lot like answering "just use pipes" when someone asks how to install a toilet. There's a bit of detail missing there.