Revisión de Animator: Complemento de animación de WordPress de apuntar y hacer clic (sin código)

¿Quiere agregar animaciones llamativas de desplazamiento y basadas en el tiempo a su sitio de WordPress?

Si es un experto en CSS, puede configurar estas animaciones usted mismo. Pero para el resto de nosotros, WordPress no ofrece una manera fácil de agregar animaciones al contenido.

Animator es un nuevo complemento independiente del equipo de CSS Hero que cambia eso, brindándole acceso a una interfaz simple de apuntar y hacer clic para configurar todos los diferentes tipos de animaciones en su sitio de WordPress, ya sea que esté usando el editor nativo o un Complemento del creador de páginas.

Si no es una persona técnica, esto le da la posibilidad de configurar animaciones en su sitio. E incluso si es capaz de escribir su propio CSS, Animator aún puede acelerar sus flujos de trabajo con su interfaz.

En nuestra revisión práctica de Animator, analizaremos más a fondo lo que ofrece este complemento y le mostraremos cómo usarlo para configurar animaciones de WordPress.

Reseña de Animator: ¿Qué ofrece el complemento?

El beneficio de alto nivel de Animator es que le permite agregar toneladas de animaciones diferentes a su sitio sin necesidad de CSS, JS u otros conocimientos técnicos profundos.

En cambio, puede hacer todo desde una interfaz de apuntar y hacer clic, completa con una línea de tiempo de animación para ayudarlo a controlar sus animaciones.

Animator proviene del mismo equipo que el popular complemento CSS Hero, si está familiarizado con eso. En pocas palabras, Animator es para las animaciones lo que CSS Hero es para el estilo CSS general.

Repasemos algunas de las características más importantes con un poco más de detalle.

Interfaz de apuntar y hacer clic

Para ayudarlo a administrar sus animaciones, Animator ofrece una interfaz simple de apuntar y hacer clic.

Hay dos partes principales:

1. Una vista previa visual de ancho completo de su sitio : a medida que agrega animaciones, puede ver instantáneamente cómo se ven en la vista previa en vivo. Esto es realmente útil para que pueda hacer pequeños ajustes sin necesidad de recargar constantemente una vista previa por separado.
2. Una línea de tiempo de animación : puede usar la línea de tiempo para configurar una o más animaciones según el tiempo o el comportamiento de desplazamiento del usuario. Puede arrastrar cosas y ajustar la configuración para obtener el efecto perfecto.

Obtendrá una visión mucho más detallada de esta interfaz en la sección práctica... pero, en general, es muy fácil de usar.

Más de 3 modos de animación de alto nivel con toneladas de propiedades de animación

Para ayudarlo a configurar sus animaciones, Animator ofrece tres modos de alto nivel:

• Parallax : animaciones "interpoladas" basadas en la posición porcentual del elemento en la ventana gráfica. Tween es la abreviatura de intermedio: la idea básica aquí es que le permite crear efectos de desplazamiento de paralaje.
• Desplazamiento : active estilos o animaciones CSS específicos después de que el usuario haya desplazado una cantidad específica de píxeles. Por ejemplo, podría aplicar estilos específicos de estado a su encabezado cuando el usuario se desplaza hacia abajo en la página.
• Temporizado : crea animaciones basadas en el tiempo que ocurren en un horario establecido. Por ejemplo, agregar una animación flotante a un elemento para que se destaque.

Estos son algunos ejemplos genéricos de Animator que muestran los diferentes modos de animación:

Más allá de los modos de animación de alto nivel, también tiene la capacidad de animar una gran variedad de propiedades CSS, incluidas las siguientes:

• Color de fondo
• Posición de fondo
• Sombra de la caja
• Tamaño de fuente
• Espaciado de letras
• Opacidad
• Perspectiva
• Girar X, Y o Z
• Escala
• Sesgar X o Y
• Ancho
• …mucho más

Para simplificar las cosas, Animator incluye ajustes preestablecidos para muchos de estos:

Sin embargo, también tiene la opción de crear su propia animación, lo que le permite ir más allá de esos ajustes preestablecidos si es necesario.

Funciona con editores nativos, temas y creadores de páginas

Además de trabajar con el editor nativo de WordPress, Animator también funciona con temas de terceros y complementos de creación de páginas.

Esto incluye, pero no se limita a, las siguientes herramientas:

• Elementor
• Constructor de castores
• divide
• Creador de páginas de WPBakery
• Avada
• Astra
• Oxígeno

Básicamente, Animator debería funcionar en cualquier elemento de su sitio, independientemente de su procedencia.

Por ejemplo, tal vez le guste Beaver Builder para el diseño, pero cree que las opciones de animación de Beaver Builder son demasiado limitadas para sus necesidades.

Al instalar Animator junto con Beaver Builder, obtendrá la capacidad de agregar animaciones más avanzadas a sus diseños de Beaver Builder.

Editar o exportar animaciones manualmente (para usuarios más avanzados)

Si bien Animator está diseñado para que los usuarios sin conocimientos técnicos puedan crear animaciones con la interfaz de apuntar y hacer clic, los usuarios más avanzados pueden apreciar que Animator aún le brinda acceso al código subyacente si desea realizar ediciones directamente.

También puede exportar los datos de la aplicación si es necesario.

Complemento completamente independiente

Si bien Animator proviene del equipo de CSS Hero, no necesita tener CSS Hero instalado para usar Animator.

Es decir, Animator es un complemento completamente independiente.

Dicho esto, Animator seguirá funcionando bien con CSS Hero, por lo que puede usar ambos si desea controlar el estilo de su sitio sin código.

Cómo crear animaciones de WordPress usando el complemento Animator

Ahora que comprende lo que ofrece Animator, profundicemos en cómo es realmente usar Animator en su sitio.

A continuación, le mostraré paso a paso cómo configurar animaciones de WordPress usando Animator y un sitio de demostración que creé con el tema Astra y el editor nativo de WordPress.

1. Abra la interfaz de Animator en la página que desea animar

Para comenzar, querrá abrir la interfaz de Animator en la página que contiene el contenido que desea animar.

Si desea animar un elemento de todo el sitio ( como su encabezado ), puede abrir cualquier página que incluya su encabezado. Cualquier animación que configure se aplicará automáticamente a todas las instancias de ese encabezado.

Para iniciar la interfaz de Animator, solo necesita hacer clic en la opción Hero Animator en la barra de herramientas de WordPress mientras visualiza la página correspondiente.

2. Seleccione el elemento que desea animar

Una vez que haya abierto la interfaz de Animator, debería ver una vista previa visual de su página, junto con la interfaz de Animator en la parte inferior.

Para comenzar, querrá seleccionar el elemento para animar haciendo clic en él en la vista previa en vivo.

Al pasar el cursor sobre la vista previa en vivo, Animator mostrará información adicional sobre cada elemento, lo que le ayudará a elegir el correcto.

Por ejemplo, para animar la imagen en mi diseño de prueba, solo necesito seleccionarlo:

También puede ingresar manualmente una clase o ID de CSS, lo que podría ser necesario para algunas imágenes de fondo.

Por ejemplo, tuve problemas para usar el enfoque de apuntar y hacer clic para seleccionar la imagen principal en mi sitio de prueba. Parece ser algo relacionado con la forma en que el sitio de demostración de Astra estableció la imagen como fondo del contenedor en su bloque contenedor especial, porque no tuve problemas al usar apuntar y hacer clic para seleccionar cualquier otra imagen.

3. Elija su modo de animación

Una vez que haya seleccionado el elemento para animar, desea seleccionar el modo de animación utilizando el cuadro Relativo a .

De nuevo, tienes tres opciones:

1. Altura de la ventana gráfica (también conocida como paralaje)
2. Píxeles desplazados
3. Tiempo

Básicamente, está haciendo una declaración declarativa, por ejemplo, "Quiero animar [este elemento] en relación con [este modo de animación]".

Para este ejemplo, lo configuré para animar la imagen de mi sitio en relación con un temporizador en bucle.

Nota : puede agregar múltiples tipos de animaciones a un solo elemento. Por ejemplo, podría agregar una animación basada en el tiempo y una animación de paralaje (altura de la ventana gráfica).

4. Configura tu animación usando la línea de tiempo

Ahora que ha elegido lo que está animando, está listo para configurar su animación usando la línea de tiempo.

Para hacer eso, haga clic en el ícono más para agregar animación :

Esto abrirá una ventana emergente que contiene los diferentes tipos de animaciones que puede usar con ese modo de animación.

Por ejemplo, para una animación basada en el tiempo, algunas de las opciones predeterminadas incluyen lo siguiente:

• Rebotar
• Descendente
• Flotar
• Desenfoque de espacio de letras
• Marquesina
• Pulso de sombra
• Salto retráctil
• giro simple

Puede ver vistas previas animadas de cómo se vería esa animación, lo cual es realmente bueno para elegir la animación correcta.

Si desea hacer un tipo diferente de animación que no está en la lista preestablecida, también puede crear su propio tipo de animación.

Cuando elija una animación, aparecerá en la línea de tiempo. La animación también se aplicará a la vista previa en vivo, para que pueda ver exactamente cómo se verá en su sitio.

Para una animación basada en el tiempo, verá que aparece una línea al moverse a través de la barra de la línea de tiempo a medida que se completa la animación, lo cual es realmente útil.

Si desea que la animación sea más larga o más corta, puede simplemente arrastrar la barra en la línea de tiempo.

También puede hacer clic en el ícono de tres puntos para acceder a configuraciones más avanzadas, como si desea o no repetir la animación (y, de ser así, por cuánto tiempo).

Si desea agregar varias animaciones, puede repetir los pasos para agregar una animación diferente.

Luego, puede organizar esas animaciones en la línea de tiempo para lograr el efecto deseado.

Asegúrese de desactivar el bucle infinito si desea utilizar múltiples animaciones basadas en el tiempo.

Tampoco está limitado a crear el mismo tipo de animación. Por ejemplo, técnicamente podría agregar animaciones basadas en tiempo y desplazamiento al mismo elemento.

Para los elementos con desplazamiento de paralaje, Animator también le permite controlar LERP (interpolación lineal) para suavizar los comportamientos de desplazamiento del elemento.

Para ajustar esto, puede usar el menú desplegable Lerp en el lado izquierdo de la interfaz.

5. Publica tus animaciones

Cuando esté satisfecho con sus animaciones, todo lo que necesita hacer es hacer clic en el botón Guardar para que aparezcan en vivo en su sitio.

También hay una opción práctica que te permite elegir si publicar o no tus animaciones en la versión móvil de tu sitio.

Explorando algunos otros modos de animación

Los diferentes modos de animación tendrán interfaces ligeramente diferentes en la línea de tiempo.

Por ejemplo, si elige una animación Altura de la ventana gráfica, la línea de tiempo cambiará de segundos a una altura de ventana porcentual relativa.

Por ejemplo, puede ver que comienza en 150 % y llega hasta -50 %.

Si está animando algo como el color de fondo, puede elegir diferentes colores según la profundidad de desplazamiento relativa:

Para una animación de píxeles desplazados, verá números de píxeles específicos en lugar de porcentajes relativos.

Por ejemplo, si establece su paso de animación en 600 píxeles, la animación ocurrirá cuando el usuario se haya desplazado exactamente 600 píxeles.

Cómo editar, exportar o manipular directamente su código

Para usuarios más avanzados, Animator también les permite ver los datos JSON sin procesar de sus animaciones. Puede usar esto para volver a editar sus animaciones, o copiarlo/pegarlo en un archivo de texto para tener una instantánea completa de las animaciones actuales.

También hay un panel de operaciones , dirigido a usuarios más técnicos, que le permite manipular mediante programación el objeto JSON de datos del complemento agregando su propio código javascript. No soy desarrollador, así que no estoy totalmente seguro de qué oportunidades agrega esto, pero me imagino que los desarrolladores apreciarán este nivel de control.

Puede acceder a estas opciones haciendo clic en el icono de tres puntos junto al botón Guardar y seleccionando Exportar datos .

Precios de animador

Animator solo viene en una versión premium, pero tiene un precio asequible para lo que ofrece.

Al precio normal, le costará $ 49 para usar en sitios ilimitados y un año de soporte y actualizaciones.

Sin embargo, para celebrar su lanzamiento, el complemento actualmente tiene un precio de solo $ 29 en el momento en que escribimos nuestra revisión del complemento Animator.

Si lo compra a este precio de $29, puede fijar ese precio para las renovaciones si desea continuar recibiendo soporte y actualizaciones después del primer año.

Si desea probar el complemento antes de realizar su compra, Animator le permite activar una demostración completamente funcional de la interfaz de animación. Puede acceder a ella en esta página o haciendo clic en el botón Probar demostración en la página de inicio de Animator.

También hay una garantía de devolución de dinero de 30 días, por lo que puede probarlo en sus propios sitios sin riesgo para su billetera.

Reflexiones finales sobre Animator

En general, Animator cumple su promesa de ofrecer animaciones fáciles de apuntar y hacer clic.

Ciertamente no soy un desarrollador, pero pude ponerme en marcha muy rápidamente.

La interfaz basada en la línea de tiempo facilita la organización de sus animaciones y la administración de su configuración. También es muy útil poder ver instantáneamente cómo se ven esas animaciones en la vista previa visual, sin necesidad de actualizar la página.

Si bien Animator es lo suficientemente simple para usuarios no técnicos, creo que los usuarios avanzados aún podrían beneficiarse solo porque puede acelerar las cosas. Entonces, incluso si es capaz de escribir su propio CSS, es posible que prefiera usar Animator para ahorrar tiempo.

Si desea probar Animator usted mismo, puede usar los botones a continuación para comenzar: