Make your content more engaging by bringing your resources to life with animation. Movement catches people’s eyes; it’s inevitable. In Genially you can enrich your content with amazing moving effects which will grab your audience’s attention, and turn your creations into animated content that’s sure to wow them, in just a few clicks.
In this article we’ll look at the following things:
- What type of animation effects there are
- How to apply animation to an element
- What aspects of an animation you can personalize
- How to copy and paste animation from one element to another
- How to know if animation effects have been applied to an element
- How to delete one or all of the animations from an element
What types of animation effects are there?
To see the types of animation effects available, select any element by clicking on it and then on the Animation icon that appears above it. A tab will open on the right of the screen with all the animation options.
The types of animations available are:
- Entrance: The animation effect will happen when the animated element enters the screen.
- Exit: The animation effect will happen just before the element disappears from the canvas. This type of animation can be used to remove resources when you want your audience to see them for a limited time only.
- Continuous: The animation will display for as long as the element is on the screen and only stops when you move to the next page. It is often used to show the viewer that the elements of your genially have interactivity applied.
- Hover mouse: The animation will be activated when you hover your mouse over the element. It allows you to hide and show different elements. You can make it so that an element is only visible to your audience while they are interacting with it.
How to apply animation to an element
To animate an element:
1. Select the element you want to bring to life with animation.
2. Click on the 'Animation' icon that appears just above the element.
3. Choose the type of animation: entrance, exit, continuous, or hover mouse. Bear in mind that the four different types can be applied to the same element.
4. Personalize your animation: there are different options available to help you take your animations to the next level. We’ll show you more on this in the next section.
NOTE: Animations can also be applied to a group of elements.
What aspects of an animation can you personalize?
The personalizable attributes of an animation are:
- The direction: Define in which direction the element goes. It can stay in place, or move horizontally or vertically.
- The effect: You can choose between lots of animation styles. The available effects vary according to the direction you choose. Hover your mouse over each option to preview the animation on the canvas. That makes it much easier to choose!
- The start: You can decide the moment you want the animation to activate. The count starts from the moment the element appears on the screen. Being able to edit the start time of the effect provides many useful options. For example, the entrance order of the elements of a genially.
- The speed: You can decide if you want the animation to go faster or more slowly. The minimum speed is 4 seconds and the maximum is 0.5 seconds.
TIP: For the best results, always choose the direction of the animation before the effect, because each direction has different effects available.
How to copy and paste an animation from one element to another
If you want several elements to have the same animation effects, you don’t need to edit them one by one. You only need a few clicks to copy and paste the animations from one element to another. These are the steps to follow:
1. Select the element that has the animations you wish to replicate and click on the Animation icon.
2. In the animation menu, click on the 'Copy' icon that you see at the top.
3. Select the element you want to apply the animations to.
4. In the animation menu, click on the 'Paste' icon that you see at the top.
How to know if animation effects have been applied to an element
Click on the element and observe the 'Animation' icon. If it’s gray, there aren’t isn’t any animation. If the icon is blue, the element has animation applied to it.
Click to show the animation menu and see what types of animation have been applied to it. You’ll be able to identify them easily; when an animation is activated, there’s a yellow dot next to the type of animation.
How to delete one or all of the animations from an element
To delete an animation, click on the type of animation you want to eliminate and then select the option None in the Effects section.
To delete all animations at once, click on the bin icon you see at the top of the animations menu.