Tiempo lectura: 
4 comentarios
10/10/2017
Hace unas semanas llegaba un gran día para todos aquellos diseñadores web que utilizamos el maquetador visual Divi de Elegant Themes en nuestros diseños. A partir de ese momento estaban disponibles las animaciones de Divi.
Lo más importante de todo es que con esta incorporación de las animaciones al maquetador se acaba lo de tirar de código CSS para animar elementos.
Guiado por la emoción del momento, me puse manos a la obra y probé las animaciones. Quería saber qué tipos permitía Divi, cómo añadirlas y, sobre todo, si afectan a la velocidad de carga de un sitio web.
Aquí puedes ver el primer vídeo que grabé y subí a Facebook, en el que hacía un repaso muy rápido a las animaciones de Divi, pero en el que no tuve tiempo para profundizar en cada una de ellas.
Por ese motivo, he decidido crear este artículo, para probar cada una de las animaciones, explicar en qué consiste cada una de ellas y también analizar cómo afectan a la velocidad de carga de WordPress.
Repaso a las 7 animaciones de Divi
Antes de pasar a hablar de cada una de las animaciones de Divi, conviene mencionar algunas consideraciones previas:
- Divi incluye 7 animaciones diferentes, por el momento (imagino que con el paso del tiempo irá añadiendo otras diferentes).
- Se pueden animar todos los elementos de un sitio web: secciones, filas y módulos.
- Para animar un elemento, tienes que ir a sus ajustes de diseño y buscar el apartado Animation Style.
- Las animaciones vienen desactivadas por defecto (none).
1) Animación desvanecer (fade)
La primera animación se trata de un sencillo efecto de desvanecido, como puedes ver en el texto "Qui som".
¿Qué puedes configurar en esta animación?
- La repetición: una sola vez o de forma continua.
- La duración.
- El retraso.
- La opacidad.
- La velocidad.
2) Animación diapositiva (slide)
La segunda animación tiene un efecto diapositiva, que aparece desde el fondo y se expande hacia delante.
¿Qué puedes configurar en esta animación?
- La repetición: una sola vez o de forma continua.
- La dirección: centro, derecha, izquierda, arriba y abajo.
- La duración.
- El retraso.
- La intensidad.
- La opacidad.
- La velocidad.
3) Animación rebote (bounce)
Es la animación que tengo instalada en la cabecera de la home de esta web y que puedes ver en la parte destacada del post. Se trata de un efecto que aparece desde el fondo hacia delante e incluye un efecto rebotado.
¿Qué puedes configurar en esta animación?
- La repetición: una sola vez o de forma continua.
- La dirección: centro, derecha, izquierda, arriba y abajo.
- La duración.
- El retraso.
- La opacidad.
- La velocidad.
4) Animación zoom
Con esta animación conseguirás un efecto zoom en el elemento que quieras animar.
¿Qué puedes configurar en esta animación?
- La repetición: una sola vez o de forma continua.
- La dirección: centro, derecha, izquierda, arriba y abajo.
- La duración.
- El retraso.
- La intensidad.
- La opacidad.
- La velocidad.
5) Animación invertir (flip)
La quinta animación consiste en un efecto que invierte el elemento animado, es decir, le da la vuelta en un giro de 90º en función de cómo se configure.
¿Qué puedes configurar en esta animación?
- La repetición: una sola vez o de forma continua.
- La dirección: centro, derecha, izquierda, arriba y abajo.
- La duración.
- El retraso.
- La intensidad.
- La opacidad.
- La velocidad.
6) Animación doblado (fold)
Esta animación consiste en un efecto doblado del elemento, es decir, que se "doble" la fila, columna o modulo que esté animado.
¿Qué puedes configurar en esta animación?
- La repetición: una sola vez o de forma continua.
- La dirección: centro, derecha, izquierda, arriba y abajo.
- La duración.
- El retraso.
- La intensidad.
- La opacidad.
- La velocidad.
7) Animación rodado (roll)
La última animación es la más "loca" de todas, pues consigue que el elemento gire completamente en función de cómo lo configures.
¿Qué puedes configurar en esta animación?
- La repetición: una sola vez o de forma continua.
- La dirección: centro, derecha, izquierda, arriba y abajo.
- La duración.
- El retraso.
- La intensidad.
- La opacidad.
- La velocidad.
Cómo personalizar las animaciones de Divi
Como he mencionado en cada una de ellas, las animaciones de Divi incluyen una serie de parámetros de configuración y personalización:
Dirección de la animación
Permite configurar que el elemento se anime desde la parte superior, inferior, izquierda o derecha y el estilo se ajustará automáticamente.
Duración de la animación
Por defecto, las duraciones de las animaciones se establecen en un segundo. No obstante, puedes acelerar o reducir su duración.
Retardo de la animación
Las animaciones se reproducen automáticamente en cuanto el elemento animado es visualizado por el navegador al desplazarte por la página. La adición de un retardo aumentará el tiempo que tarda antes de que se produzca la animación una vez que el elemento esté visible en la pantalla. Mediante la combinación de diferentes elementos animados con retrasos escalonados, puedes crear algunos efectos muy chulos.
Intensidad de la animación
Con este parámetro puedes aumentar el control deslizante para hacer tus animaciones más rápidas, o bien disminuir el control deslizante para hacerlas más sutiles.
Opacidad de la animación
Por defecto, todas las animaciones se atenúan desde una opacidad inicial de 0. Puedes ajustar esta cifra para minimizar o eliminar el efecto de atenuación.
Curva de velocidad de la animación
Aquí puedes ajustar la curva de velocidad que se utiliza durante la animación, cada una de las cuales proporciona una sensación ligeramente diferente.
Consejos para añadir animaciones a tu diseño web
A pesar de que las animaciones son un elemento muy chulo que le dan un toque moderno y creativo a los sitios web, debes tener en cuenta una serie de recomendaciones a la hora de usarlas:
- No abuses de las animaciones. Cuidado con ellas, las carga el diablo. Te recomiendo animar únicamente aquellos elementos que aporten un valor visual atractivo y que sean estrictamente necesarios. No te pongas a animar partes de tu web a lo loco.
- Incluye animaciones en tu sitio web con criterio ¿A qué me refiero con criterio? Pues, por ejemplo, si vas a animar varios elementos de una página concreta, no los pongas todos juntos. Es decir, deja suficiente espacio entre las diferentes animaciones para que el usuario disfrute de ellas y no se vuelva loco.
Ésos son básicamente los dos consejos que te puedo dar a la hora de incluir animaciones en tu sitio web 🙂
¿Afectan las animaciones de Divi a la velocidad de carga?
Cuando me enteré que Divi había incluido las animaciones en su maquetador, la primera pregunta que me hice fue cómo afectarían a la WPO de los sitios web.
Si me lees habitualmente, ya sabrás que el tema de la velocidad de carga me tiene un pelín "obsesionado" últimamente. Quiero que todos mis sitios estén bien optimizados y carguen muy rápido.
Entonces, la mejor forma de saber si las animaciones afectan o no a la velocidad era probándolo.
Me puse manos a la obra e hice varias pruebas, tanto en mi web como en otras diseñadas con Divi.
Tras incluir varias animaciones en una misma página de cada sitio web y medir la velocidad de carga con Pingdom, descrubrí que las animaciones de Divi no tienen ningún afecto negativo en el proceso de carga del sitio web. De hecho, tampoco afectan al PageSpeed de Google.
De este modo, aquí puedes ver un ejemplo de optimización y carga de uno de mis últimos diseños para un cliente del servicio de diseño web en WordPress.
Por lo tanto, puedes usar las animaciones sin problema (aunque siempre con cabeza) en tu sitio web.
¡Hasta aquí este repaso a las animaciones de Divi! Espero que este post te sea de gran utilidad si estás pensando en usarlas y quieres saber cómo configurarlas 😉
Gracias por esta guía, Max. Ni sabía que todo está posible con las animaciones de Divi. Y también estoy de acuerdo contigo que la gente no las abuse y las utiliza sólo donde está necesario.
En que version de divi ya habilitan esas animaciones?
Hola Bryan,
No lo recuerdo exactamente, pero ya hace varios meses que están disponibles las animaciones en Divi.
Cuando publique este post (octubre 2017) acababan de salir como novedad.
Saludos
Hola Max, yo quiero poner animación de Parques y que cada Parque lleve su video enlazado a una URL de Vimeo, pero no encuentro en dónde el video se repita siempre, ya que termina y me pone más de estos Parques, no retorna al principio. No encuentro el botón que diga repetición.