Smart animations with custom properties

A few days ago I was talking with a friend about the most popular CSS libraries to integrate simple animations into a project. After a bit of research these names emerged, including the most popular Animate.css and AnimeJS:

• Animate.css - https://daneden.github.io/animate.css/
• Animejs - http://animejs.com/
• Magic animations - https://www.minimamente.com/example/magic_animations/
• Hover - http://ianlunn.github.io/Hover/
• Anijs - http://anijs.github.io/

What amazed me most is that some of these libraries, especially those CSS, were introduced several years ago. Although CSS now allows us to find better results and write simpler and more efficient code, these libraries seem timeless (do you remember jQuery?) and only few people really give importance to the complexities that these bring with them once included into our project; especially if we have to take into account weight and performance. For example, a question that we should all ask ourselves, is:

Does it make sense to include the entire library if I need only 3 animations?

The answer is obviously no, and to overcome this, some people "copy" (👮🏻) the individual keyframes and use them independently from the library itself. If you use PostCSS (and you should) there is a plugin that allows you to conditionally import the keyframes you want, when you need them.

The problem

Almost all of these CSS libraries provide a set of classes to which a specific animation is assigned. So, to apply a fade from bottom animation we will add the relative class to the HTML element, then customising it through CSS:

<progress class="fadeFromBottom"></progress>

<style>
  .fadeFromBottom {
    animation-duration: 2s; /* This may require !important 👀 */
    animation-delay: 0.5s;
  }
</style>

As is easily to understand, this means that for each imported animation (for example, the direction is managed with a different class) there is a corresponding CSS class and to customise it we must overwrite the code, sometime using the !important (❗️) keyword, resulting in a not-so-much scalable code.

How can we therefore evolve this approach using today's tools?

Continue reading on:

Smart animations with custom properties - Equinsuocha.io