Originality and effectiveness are two essential pillars when it comes to creating content that excites our brains. Thanks to interactivity and animation, achieving these objectives is quick and easy. Very easy. In Genially, you can set up Click animations on elements, images, or texts.

To do this, all you need to do is:

• Select the element, image, or text you want to animate.
• Click on the animation icon.
• In the menu that appears on the right, select the Click option and then the effect you want below.
  
  

The effect of the Click animation will happen only once when the element in question is clicked on. You can combine this type of animation with other animations and interactivities to create incredible effects! Do you know all the other types of animations? We explain them in this tutorial.

Combine Click animations with other animations

Let’s look at what happens with each of the different types of animations when they’re used along with the new Click animations:

• Entrance animation: If an element has an Entrance animation applied and you add Click animation to it, you have to wait for the entrance animation to finish before you can click and trigger the click animation.
   
• Exit animation: in this case, you can activate the Click animation before the Exit animation starts.

  
  

  Note: An Exit animation needs a start time so that the element does not disappear immediately, so you can only use the Click animation during that time frame, since the element will disappear when the Exit animation start time is reached.  

  
  

  For example, if you choose the Exit animation with Fade out effect and the start time is 3 seconds, you only have those 3 seconds to activate the Click animation before the Exit animation is activated.
  
  Continuous animation: If you use this combined animation, when you click on the element, the Click animation will begin, and once it finishes, the continuous animation will continue to run.
  
  
  

  Hover mouse animation: This is a very interesting combination. When you activate Click and Hover mouse animations, they happen at the same time. If you hover the mouse over the element you will see the Hover mouse animation and if you click on it you will see the Click animation; the ultimate combination!

  

Set the time between animations

A great idea when combining animations is to use an Entrance effect and combine it with an Exit effect. To do this, you have to calculate when the Entrance animation is activated (for example, enter at 3 seconds) and when the Exit animation is activated (for example, at 6 seconds).

And what if we added Click animation too? Well, it looks amazing! But bear in mind that your audience will only have that three-second window to click on the element before it disappears.

That’s why it’s important to allow significant time for the viewer to be able to use the Click animation.

Interested in this topic? You can continue learning in the Genially Academy