Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

103
Vistas
Animation CSS/JS Jerky on Android and sometime PC

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).

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda