3D Visualization

After that it utilizes a transform to Invert (I) the element’s changes, so that the element seems to be within the First position. Lastly 3d visualization Plays (P) the animation forward by getting rid of the changes used in the Invert step.

So essentially, you remove transform rather than using it. Why? Well, what this means is the browser already knows what exactly A and B for that element’s journey and has the capacity to start the animation faster. The Switch technique provides you with the greatest results when an animation is performed on user input. The main difference may not be huge, but on the phone having a less effective CPU this is actually distinction between it feeling as an immediate or postponed response in the website. When you are accustomed to the concept, writing animations the Switch way feels natural. Here’s a little code example while using Switch technique:

view rawanimation.css located with ? by GitHub

As you can tell, I simply corrected an order from the animation. Rather than pushing the element 150px in the left right, I drawn it left with transition’s negative value after which removed that transition entirely (set transform value to “none”).

Building on the new discovery

Things I discovered was that does not lots of people appear to understand this method. I couldn’t have it from my mind and made the decision to behave to convince increasing numbers of people to participate me around the journey to faster animations. I understood there have been many popular animation libraries, eg. 3d visualization .css, but they didn't make use of the Switch method and incorporated animations that may cause website repaints. Therefore, I made a summary of moves that you can do only using safe transforms and opacity and made the decision to construct a little CSS library that consists of only lightweight animations. When the animated elements are colored towards the browser window (that is really fast btw!), they're running at stable 60 fps and consume hardly any browser sources. There aren't any repaints next, therefore, the library name: repaintless.css.