Originalidade e eficácia são duas características essenciais na hora de criar conteúdos que nos entusiasmam. Graças aos efeitos de  interatividade e animação, agora é rápido e fácil, muuuito fácil, cumprir com esses critérios. Em Genially, você pode configurar animações para que sejam executadas Ao clicar em um elemento, imagem ou texto.


Para isso:

  • Selecione o elemento, imagem ou texto que deseja animar.
  • Clique no ícone de animação.
  • No menu lateral direito, selecione a animação Ao clicar e escolha o efeito desejado.


A animação Ao clicar é fugaz como uma estrela cadente: é reproduzida uma única vez quando clicamos no elemento em questão.  E claro, você pode combinar esse novo tipo de animação com todas as outras que você já conhece. 


Dito isso, dê asas à sua imaginação e crie efeitos incríveis!  O quê? Você não conhece os outros tipos de animação? Don’t worry and  visite este tutorial.


Combinar animação Ao clicar com outras animações


Vejamos o que acontece com cada uma das animações uma vez combinada com a nova animação Ao clicar:


  • Animação Entrada: se você adicionar a animação Ao clicar a um elemento que já tem uma animação de entrada aplicada, você deve esperar que a animação Entrada se execute antes de clicar e executar a nova animação Ao clicar.

  • Animação Saída: nesse caso, é possível ativar a animação Ao clicar antes da animação Saída.


    Atenção: uma animação de saída precisa de um tempo de início para que o elemento não desapareça imediatamente, então você só pode usar a animação Ao clicar durante esse período de tempo, já que o elemento desaparecerá quando o tempo de saída definido chegar ao final.  


    Por exemplo, se você escolher a animação Saída, com o efeito Desaparecer e um tempo de início de 3 segundos, esse seria o tempo que você teria para acionar a animação Ao clicar antes que a animação Saída seja executada.

  • Animação Contínua: no caso dessa combinação, quando clicamos no elemento, a animação contínua será pausada para que a animação Ao clicar seja executada, depois disso,  a animação contínua seguirá com sua execução. 


  • Animação Mouse por cima: se trata de uma combinação muuuito interessante. As animações Ao clicar e Mouse por cima, uma vez combinadas, se reproduzem ao mesmo tempo! Se você passar o mouse sobre o elemento, você verá a animação Mouse por cima e então você clica e… tcharan! Aí estará a animação Ao clicar! Combinação perfeita, sim ou claro?

Configurar o tempo entre as animações


Uma grande ideia quando combinamos animações é usar um efeito de entrada com um efeito saída. Para isso, é preciso calcular quando a animação Entrada é executada (por exemplo, começa em 3 segundos), assim como o momento de execução da animação Saída (por exemplo, em 6 segundos).


E se adicionarmos também a nova animação Ao clicar? Hmm... boa ideia! Ficaria genial!

Só uma coisinha : tenha em conta que o seu público terá apenas 3 segundos (com base no exemplo anterior) para clicar no elemento, já que depois disso ele desaparece.


Portanto, é preciso dar ao espectador um certo tempo para fazer uso da animação Ao clicar.