0

I create a Periodic Table Apps and I create an animation where Element move from initial position to center of window, but transitions are Jerky. To do this I Create a Copy of this Element (clicked) and change is Class.

enter image description here

Animation are made from CSS (updating class which has other Left/Top/Translate values) and few are coming from JS (for example : x.style.left = y)

I also tried to create CSS ROOT values and update them with JS, but same problem. I Also tried to remove maximum JS which is not necessary. Tried Request Animation Frame "everywhere" too.

I am not using Plugins, it's a VanillaJS App made With Isotope. Do you know why is this laggy ? Are there too many elements in my DOM ? Or Maybe i Am doing wrong ? Love this kind of transition, so I really Want to know how i can optimise it !

Here is a Link for my Project JavaScript (Might be updated frequently).

Lucas
  • 85
  • 9

1 Answers1

1

I recently had a similar problems with jerky/laggy animation with a slider.

The conclusion was that animation should be done with transform properties, not with top/bottom/left/right and neither with margin or padding.
Here are two posts I found that explain the problem:
Laggy CSS animation
Why transitions for some CSS properties are slow and none fluent

SmilyLily
  • 88
  • 8
  • Hi, Thanks for the answer ! Yeah a read that few days ago, tried a bit (still had problem), but i didn't replace all Left/Top etc by translate, maybe i should tried. I am using Isotope, so element are absolute with Left/Top position, I will need to work on this tho – Lucas Jan 18 '22 at 09:36
  • the elements can still have those properties based on what I could gather. But the animation needs to happen with `transform`. I know, it's really complicated, especially when you need to change existing code to work. – SmilyLily Jan 18 '22 at 09:41
  • Ok thank you ! I Will try to change all animation Left/Top... by Transform properties. How should i do with Heiht/Width properties ? Scale is the only way ? – Lucas Jan 18 '22 at 09:52
  • Edit : I Tried to change all transition Top/Left etc by Transform translate and it's working ! Thank you very much Now I have another trouble : Width and Height, those properties are still jerky, I tried with RequestAnimationFrame, but I still have problem tho :( – Lucas Jan 18 '22 at 10:41
  • you can also use `transform` to change the size, I believe for size you need to use `transform: scale`. You can read about it here: [2D Transforms](https://www.w3schools.com/css/css3_2dtransforms.asp). – SmilyLily Jan 18 '22 at 10:53
  • Yeah I know but using Scale Will change Scale Content too. Maybe I need to calculate Scale(0.X) for content to make it lower, but not the best way i guess :( – Lucas Jan 18 '22 at 10:58
  • I'm not sure about that either unfortunately. My best guess would be that you could reverse the scale within the child items. So if you give a container a scale of 0.5 to half it, give the child a scale of 2. – SmilyLily Jan 18 '22 at 11:11
  • Thx for answer. I'll check, but I Hope I'll be able to find a better solution, – Lucas Jan 18 '22 at 14:12