Spring

The magic of animations on the web

  • 30 Nov 2021
  • ⌘
  • 2 min read

Why animations is named spring, I feel that a spring have the main characteristics of an animation. For example the spring in the keyboard keys, first you touch it (a pre-action animation), then you press it (an action animation) and the end you release it (a post-action animation). In a more poetic way it can be like a story or a song, there are timeframes, there are cause and effect, and there are the origin of a tension and the release of the tension.

Of course, there are variotions, and you not always need to have these three, or even don’t have any of them, as may occur for non-interactive animations

Animations

The three Ws

Where

There are user interaction and non-user interaction related animations. The former are the one found on buttons

Which

Which animations to use? We can separate in two groups the mobile animations, that move or transform one or multiple elements; and the static animations ones that usually are changing the color or style of an element without moving anything.

When

Usually the safest one for begineers are the statics

Web Engines

You may think that the difference of web engines its only a matter of processing speed, and how they process the pages, ending in the same output after some milliseconds it take to process the page from the code the user retrieved from a server, it should look the same at the of the day.

There are bad and good news. The bad news is it is still differences on the output on different engines, versions of the same engine and maybe some implementations on different browsers using the same engine. For example there are many complains on the Blink-based Brave browsers blocking certain features, that other browsers using the same engine do not have this issue.

It is quite complex to make every device happy, these days almost any devices can access the internet compared to mainly desktop computers

Although the headache Explorer browsers got defunct there are still some minimal discrepancies on different web engines. For now and by far the most used engine is Google’s Blink with more than 70% of market share, then it Apple’s WebKit with around 14% and the on decline Firefox’s Gecko engine with pluming below 2%.

You may ask – isn’t dozens of web browsers, why aren’t only these three main engines? – because they use engines from these three

On mobile

Unfortunately because of the nature of using the fingers to interact with the websites and the viewport (screen size) of them, the animations on small elements looks almost negligible. This occur because of the buttons or Interaction Elements on the screen are easily obstrust by our fingers, and the finger is not only the surface touchng it, the fingertip but also the three falanges.