Buenas prácticas para optimizar animaciones web

11/12

Lectura

Teniendo en cuenta lo que vimos en la clase de CSS Triggers, te dejo aquí 5 buenas prácticas para optimizar tus animaciones web:

  1. Usa dentro de lo posible propiedades que solo tengan que pasar por el proceso de Composite.
  2. Si necesitas animar alguna propiedad que sea muy costosa (como width, height, left, entre otras), trata de encontrar otra propiedad que sea menos costosa con la que puedas lograr el mismo resultado (o al menos un resultado similar).
  3. Evita animar muchas propiedades al mismo tiempo.
  4. Si necesitas esconder elementos, normalmente se usan las propiedades opacity y visibility en vez de usar la propiedad display (ya que es una propiedad no animable: Propiedades que pueden ser animadas).
  5. Evita hacer animaciones que ocurran al hacer scroll, ya que el evento que escucha el scroll se ejecuta una gran cantidad de veces. Mejor espera a llegar a cierto punto de la pantalla y ahí ejecutas la animación.

¡Cuéntanos si sabes de otras buenas prácticas en los comentarios!

Aportes 6

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

También considerar reducir o en algunos casos eliminar las animaciones en dispositivos móviles, ya que el rendimiento no es el mismo.

Con los consejos de este modulo se logra mejorar el rendimiento de los frames, muy cercano a lo que se considera optimo 60fps (frames por segundo).
.

.
Pasamos de 30 y algo fps a 59 fps.

Resumen de la lectura

Usa opacity y transform para animar. Propiedades como width, height, background y cualquier otras que utilicen una gran cantidad de pixeles son greedy.

Seguí los consejos y me va super bien 😄

Muy interesante

buenas recomendaciones