Animations in high quality

Asked

Viewed 162 times

8

We all know that animations on the web are a little bit eye friendly, when opening a side menu, whether in mobile or in desktop, you can only see part of your drive, giving the impression of a 'lifeless' static component, even worse 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 the popmotion, with high-quality components and animations, for example...

Codepen

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

javascript css3 ecmascript-6
  • 2

    Good reading! https://css-tricks.com/comparison-animation-technologies/

  • 1

    Hi Felipe. I removed the tag [tag:ux] because your question only deals tangentially with the subject. It’s more about how to implement animations than why they exist x or y. Another tip is: beware of texts like "We all know that ...". It is not necessarily a truth and may sound pedantic (especially if the reader doesn’t really know what you say everyone knows). :)

  • Thanks for the tip Luiz!

1 answer

2


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

What gets a little bad are those jQuery-style animations, because they’re 100% Javascript-based 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. Many people still use it because it is compatible with older browsers, and mainly because it is easy/there are plenty of examples.

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

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

  • Good answer. But.... Didn’t you mean otherwise? " As a rule the graphical elements are plotted on the CPU, and then transferred to the GPU as a texture." :)

  • No, I think that’s right. Generate using CPU, transfer to GPU. The ideal, and even the trend, is to generate in the GPU itself, the new engine of Firefox tries to transfer the maximum work to the GPU. Of course, 3D apps and games produce all images on the GPU.

Browser other questions tagged javascript css3 ecmascript-6

You are not signed in. Login or sign up in order to post.