Animations in high quality

Question

Animations in high quality

Navigation

#1 by (2 votes)

8

We all know that animations on the web are a bit unfriendly to the eye, when you open a side menu, either in mobile or desktop , you can only see part of your movement, giving the impression of a component static without life, even worse when compared to application animations in android , ios etc ...

But the web today already provides several solutions for this, the most engaged at the moment is popmotion , with high quality components and animations, example ...

Codepen

I would like to know, how is this kind of effect in animations possible, what is the change css or js that allows control of fps and fluidity in components? and if possible, the impact of this technical type for the future of applications.

javascript ecmascript-6 css3

asked by anonymous 09.03.2018 / 14:09

1 answer

How to generate a full value in Portuguese in MS Office Excel? Sending email using Gmail

score 2 · Accepted Answer

Web animations are not necessarily unfriendly. Animations that make use of CSS animations, or other CSS tricks, are excellent.

What's a bit messy are those jQuery-style animations, because they're 100% based on Javascript code manipulating basic parameters like x and y, but it was something created at a time when CSS was much weaker, and it was better than nothing . A lot of people still use it because it's compatible with older browsers, and mostly because it's easy / there are plentiful examples.

When you use a computer (which can be a cell phone), you are actually using two: one with CPU and one with GPU. As a rule the graphics are plotted on the CPU, and then transferred to the GPU as a texture. This transfer costs time and resources.

The best animations are those that transform the texture without modifying it, as is the case with many CSS animations, because they go like instructions for the GPU. The worst animations are those that redraw an element, because it involves work for the CPU and also a transfer to the GPU. The "development frontier" of the browsers is to allow manipulation of the DOM directly on the GPU, but as a rule, tinkering with DOM falls in the worst case.