Agregar animaciones a elementos en GemPages

Acerca de las Animaciones de GemPages

Las animaciones implican introducir movimiento o desplazamiento a los elementos en una página web, desde efectos sutiles como desvanecimiento o deslizamiento hasta transiciones e interacciones más dinámicas. Tiene la flexibilidad de aplicar animaciones a cualquier elemento dentro de GemPages. Siga los pasos a continuación para agregar animaciones a los elementos de GemPages. 

¿Cómo Añadir una Animación?

Siga estos pasos para agregar animaciones a sus elementos:

Paso 1: : Vaya a Administración de Shopify > Aplicaciones y seleccione GemPages Builder para acceder al Panel de Control de GemPages. Haga clic en su plantilla preferida para acceder al Editor. 

Paso 2: Haga clic en el elemento al que le gustaría agregar animación. La configuración del elemento se revelará en la barra lateral izquierda. A continuación, cambie a la pestaña Avanzada.

Paso 3: Desplácese hacia abajo hasta la sección Animación y active el interruptor.

Verá cuatro preajustes de animación disponibles:

• DesvanecerUn elemento transiciona gradualmente de estar completamente transparente a volverse completamente visible.
• Deslizar: Un elemento transiciona suavemente a través de la pantalla, típicamente en una dirección horizontal o vertical.
• ZoomEfecto visual que implica el ajuste dinámico del tamaño de un elemento, creando la ilusión de que se acerca (hacer zoom) o se aleja (quitar zoom) dentro de un espacio determinado.
• AgitaciónEfecto visual que imparte un movimiento rápido y entrecortado a un elemento, simulando un movimiento tembloroso o vibratorio.

Configuración de Animación

Cada animación tendrá diferentes configuraciones. En total, hay 9 configuraciones, que incluyen:

1. Velocidad

Use el control deslizante para ajustar la velocidad de las animaciones. Cuanto más a la derecha esté posicionado el control deslizante, más rápida será la animación.

2. Retraso

El número de segundos para retrasar el inicio de la animación o cada iteración si el bucle está habilitado. El tiempo máximo de retraso es de 20 segundos.

3. Easing

En este paso, puede elegir entre diferentes tipos de funciones de easing para controlar el ritmo de las transiciones entre fotogramas clave. Seleccionar la función de easing correcta depende de las características específicas que desee para su animación y la experiencia general del usuario que pretende lograr.

• Lineal: movimiento que ocurre de manera recta y consistente
• Ease-in: movimiento que implica una aceleración gradual de la animación al principio
• Ease-out: movimiento que implica una desaceleración gradual de la animación al final
• Ease-in-out: movimiento que implica una aceleración gradual al principio, seguida de un período de movimiento constante, y luego concluyendo con una desaceleración gradual hacia el final

4. Activador

Elija cómo se activa la animación.

• Cada vista: La animación se reproduce cada vez que el visitante se desplaza hasta el elemento.
• Primera vista: La animación se ejecuta solo la primera vez que el visitante ve el elemento.

5. Dirección

Indica la trayectoria a lo largo de la cual se moverá la animación de deslizamiento de un elemento.

6. Distancia

Ajuste qué tan lejos se mueve el elemento.

7. Intensidad

La frecuencia de agitación dentro de un tiempo específico. Cuanto mayor sea la intensidad, más pronunciada será la vibración.

8. Ratio de zoom

Indica cuánto (en porcentaje) se magnifica o se reduce el tamaño de un elemento durante el transcurso de la animación de zoom.

9. Bucle

Si la animación se repite o no con el tiempo mientras exista el elemento.