How to get rid of JavaScript animation lags?

Question

JavaScript

Good day! We really need the help of smart people living here! This is not the first time when aminating objects I encounter big brakes. And I wouldn't bother you if Google helped me.

So, I set myself the task of making a page-turning animation when scrolling similar to this site . It seems like nothing is difficult. According to the animation script, it is. But when I got down to business, the page turned out to be terribly slow. After reading the articles that Google gave out, I came to the conclusion that jQuery (animate method) animation is not the fastest and it is better to write in pure JavaScript. There was an option to use CSS Transition, but there were some problems here too, so I settled on JS and decided to use the good old setInterval. In this archivethe source is the result of my creativity. the js/functions.js file contains methods responsible for animation.

Please help me figure out what is causing the brakes. I will be grateful for any criticism and advice on how to optimize the code and make the animation smooth. If you point out my mistakes, I will be very grateful and will take everything into account. I have a great desire to learn how to write competently and efficiently in JS. If you know of any resources that would help me, I would be very grateful. I really miss a knowledgeable person who would guide me on the right path and help me avoid many mistakes.

PS When you scroll the page, please do not make a big scroll wheel, but only one position. It hasn't been finalized yet. Thanks in advance to everyone who joins the conversation =)

Answer 1

For animations I use TweenMax works very fast. has nice syntax and great tools (one timeline is worth it)

Answer 2

Could you please specify what kind of problems did you have when using css3 animation?
I would not say that the site is downright stupid, there are some inconsistencies in places, yes. The text basically twitches somehow:
In my opinion, the best option is to use css animation, and do the logic (switching classes and properties) in jquery (or pure js, if knowledge allows).

Answer 3

Animate with css