Smooth animation in Javascript?

Question

JavaScript

While working on my site, I ran into an unexpected problem: the browser implements the block movement animation unevenly, in jerks. Chrome, for example, gives a delay, after which it almost instantly moves the block to the desired position. Other browsers move the text so that it ripples and it is impossible to look at the screen.

Do you have any tips for optimizing the source code, maybe fine tuning jQuery? Perhaps you should abandon the framework if it "slows down" the work?

UPD : updated the site, an example of work is not available

Answer 1

Can you create many animations at the same time? If yes, then they should be combined into one handler

Answer 2

It all depends on the object being moved. If an object calls a lot of recalculations to show the movement, then the animation will slow down.
There are two ways out:
- Use objects in the animation as easy as possible.
- Refuse it some slowdown animations.

Answer 3

By the way, there are brakes due to loading pictures. If the slide appears for the first time, then there is a slight jerk. After loading, the animation becomes smoother.

Answer 4

It is unlikely that jquery slows down ... Maybe you have a problem?
Review these examples. Everything is smooth for me. If you don't, then it's something else
anton.shevchuk.name/wp-demo/jquery-tutorials/

Answer 5

Ripples are possible if your animation step is too slow (short animation over a long time interval).

Answer 6

The problem is with easing enabled. It does not work equally well in all browsers. With the plugin turned off, the result will be completely identical.

Answer 7

At one time, to optimize animations, I used the following crutch: if the browser supports CSS3 animation, then it is used, if not, then the usual one. If you google, you can find a plugin that modifies jQuery animate by adding CSS3.

Answer 8

Have you tried animating with scrollLeft?