Animation explained

Animation in itself is quite a complex process and requires a lot of skill to create realistic and eye-catching animations, and you need to know the tool you are using to its very core to get the best out of it.

We feel animation is also a very creative craft by its nature and technicalities like writing code or unintuitive options can sometimes kill the flow, so to speak, for many people. That’s why we put a lot of effort into simplifying that process, making it more intuitive and creative, while still maintaining all the possibilities and options of a complex animation tool, so you can achieve the same result.

A complete animation can consist of only one or multiple elements (images) and can be animated in stages, but the one thing all animations have in common is that they are triggered by an event. For instance, one such event occurs just moments after a page opens. That’s when all objects on the page that weren’t initially marked as hidden will be automatically revealed with a simple fade in effect. Another of the aforementioned events like that occurs when a shape is clicked. Thus you can reveal hidden elements or start the animation of an element that’s already visible on the page. There are many more events available, but we’ll just cover the aforementioned two to get you started and you’ll quickly see that the rest follow the same principle. So let’s move to option one.


Animation of the object after the page opens


By default, elements with no specific animation assigned to them will simply fade-in after the page is opened. If you select one such element and look at the Animations panel, you will see that the animation comprises of two steps. The first step from the left represents initial properties from which the element will animate. The second – or in this case also the last – step represent the properties to which the element will animate. This step also displays the start and end keyframes, which are represented as diamond shapes. Clicking on said step will show the exact values in the Properties panel, where you can also change them as you see fit. A alternative and more intuitive way of changing the properties of one step is by using the handles that appear on the object after you select it in the animations panel.

How do the handles work? Clicking on the element anywhere except the handles enables you to drag it around the work area. Sliding the triangle up and down will change the object’s opacity and dragging the square will change the object’s size. To rotate the element you first need to set a rotation point of origin, which you do can by dragging and releasing the diamond at a desired spot within the element. Dragging the circle will change the rotation property, which instantly reflects in the Properties panel.

So simply click on any step, which can be added to any quantity required by clicking the plus icon in the animations step toolbar, and change any property you want to achieve the desired effect.


An animation triggered by user's action

Firstly, you’ll need to create a shape and assign an action to it, either using the actions panel or the Animations panel. In both cases you’ll need to select the image you want to animate. Once selected, click Create animation and the image will appear in the timeline where you can animate it. Set the initial position, click plus to add a new step, change it’s properties and set the duration of the step. You can do this by dragging the end keyframe within the timeline or change the corresponding property within the Step editor section to the right of the timeline (the third section from the left of the Animations panel). This is also where you can change the animation’s Easing type. There are a few options you can choose from: Ease In-Out, Ease Out Exponential, Ease In and Ease Out.

Ok, feeling excited? Let’s get to work now and try out some of these options!


In this article

    Have something specific in mind? Don’t worry, just type what you are looking for. Here is our searchy searched.