Adicionar animações aos elementos no GemPages

Sobre as animações GemPages

Animações envolvem a introdução de movimento ou movimento a elementos em uma página da web, variando de efeitos sutis como desbotamento ou deslizamento a transições e interações mais dinâmicas. Você tem a flexibilidade de aplicar animações a qualquer elemento dentro do GemPages. Siga as etapas abaixo para adicionar animações a elementos do GemPages. 

Como adicionar uma animação?

Siga estas etapas para adicionar animações aos seus elementos:

Etapa 1Aceda a Administração do Shopify > Aplicativos e selecione Construtor GemPages para acessar Painel GemPages. Clique no seu modelo preferido para acessar o Editor. 

Etapa 2: Clique no elemento que você gostaria de adicionar animação. A configuração do elemento será revelado na barra lateral esquerda. Em seguida, mude para o Avançado aba. 

Etapa 3: Desloque-se até o Animação seção e alterne o interruptor on.

Você verá quatro predefinições de animação disponíveis:

• Desvanecer: Um elemento gradualmente passa de totalmente transparente para completamente visível.
• slide: Um elemento transita suavemente pela tela, normalmente na direção horizontal ou vertical.
• Zoom: Efeito visual que envolve o ajuste dinâmico do tamanho de um elemento, criando a ilusão de que ele está se aproximando (zoom in) ou se afastando (zoom out) dentro de um determinado espaço.
• Agitação: Efeito visual que transmite um movimento rápido e instável a um elemento, simulando um movimento trêmulo ou vibratório.

Configurar as configurações de animação

Cada animação terá configurações diferentes. No total, existem 9 configurações, que incluem:

1. Velocidade

Use o controle deslizante para ajustar a velocidade das animações. Quanto mais o controle deslizante estiver posicionado para a direita, mais rápida será a animação.

2. Atraso

O número de segundos para atrasar o início da animação ou cada iteração, se o loop estiver habilitado. O tempo máximo de atraso é de 20 segundos.

3. Facilitação

Nesta etapa, você pode escolher entre diferentes tipos de funções de easing para controlar o ritmo das transições entre quadros-chave. Selecionar a função de easing correta depende das características específicas que você deseja para sua animação e da experiência geral do usuário que você pretende alcançar.

• Linear: movimento que ocorre de maneira reta e consistente
• Facilidade de entrada: movimento que envolve uma aceleração gradual da animação no início
• Facilidade de saída: movimento que envolve uma desaceleração gradual da animação no final
• Entrada e saída fáceis: movimento que envolve uma aceleração gradual no início, seguido por um período de movimento constante e, então, concluindo com uma desaceleração gradual em direção ao final.

4. Gatilho

Escolha como a animação é acionada.

• Cada vista: A animação é reproduzida sempre que o visitante rola até o elemento.
• Primeira vista: A animação é executada apenas na primeira vez que o visitante visualiza o elemento.

5. Direção

Indica o caminho ao longo do qual a animação de slide de um elemento irá se mover.

6. Distância

Ajuste a distância que o elemento se move.

7. Intensidade

Frequência de tremores em um período específico. Quanto maior a intensidade, mais pronunciada a vibração.

8. Proporção de zoom

Indica o quanto (em porcentagem) um elemento é ampliado ou reduzido em tamanho ao longo da animação de zoom.

9. Ciclo

Se a animação se repete ao longo do tempo enquanto o elemento existir.