Animation explained

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.
[Live examples!]

A complete animation can consist of only one or multiple elements 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 a step will show the exact values in the Properties panel, where you can also change them as you see fit. An 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.

 

Supported animated elements

In most cases, images are the most obvious items to animate, but please bear in mind that you may also animate other objects in the same manner in the Animation panel. By default, all elements have 'fade-in to the page' animations.

Supported elements

  • Images (PNG & JPG)
  • Shapes (rectangles, ellipses and polylines)
  • Galleries
  • Videos (mp4 & YouTube)
  • Textblocks

Unsupported

  • 360 gallery
  • Audio
  • Survey and forms
  • Soundcloud
  • Webview (iframes)
  • Codes (HTML, JS & CSS)

 

Variations of the animations

There are many different approaches to animating an object on the page, but we can put them roughly into four (4) categories.
[Live examples!]

End-position animation

The most apparent advantage of this type of animation is its simplicity. Put the element into its final position, go to the Animation panel and animate a step 0 (zero) to choose where this element animates from. The logic behind this approach is that you can fine-tune the final position of the elementRemember: don't over-think an animation, if you don't know how to animate a specific element; leave it as fade-in.
[Live example!]

simple.JPG

Multi-step animation (Keyframe animation)

Real beauty lies within multi-step animations. That's where all your creativity can rise to the surface. By pressing the plus (+) button in the Animation panel, it adds another step. Change position and properties to each step, separated by keyframes. The tricky part here is that it is advisable to know in advance how the animation will look and where the steps should be. Multi-step animation requires testing, and its outcome is sometimes a pleasant surprise. Remember: a well-tuned timeline with proper animation can enrich your page or tempt a user to carry out a specific action on a page.
[Live example!]

multi.JPG

Loop animation

Have you ever wondered how a bouncing ball animation works? Well, it is a loop animation. The trick is that the starting step of the loop has the same properties as the step at the end of the loop. If you are new to this world, you should try to create a 2-step animation with a loop and see how it works for yourself. Don't forget about the easing types. Ease-in and Ease-out are accelerated and decelerated types of easing, and if you put them one after another, you can create a smooth transition between two steps. At first glance, Linear easing might be the most common option for loops but bear in mind that in reality you almost never see such linear animations. However, linear easing is a necessity for animating fly-by backgrounds. Remember: a loop animation requires a lot of testing to create a smooth appearance on the page. Moreover, if it doesn't work for you immediately, don't give up! Check our Clipart in the Library panel, and see how our examples work.
[Live example!]

loop.JPG

Initially hidden

Sometimes you don't need the elements to be visible right away, but the user's action triggered by another element starts the animation in this one. To hide an element, open the Animation panel and delete step one (1), or change the Alpha property for step one to zero (0). Both approaches hide the element from the page and put the element on stand-by. When working with images, you may also hide the images by enabling checkbox: "Initially hidden" in the image's Properties panel. Now create an additional shape and attach the Animate object action to this element. From the Action panel choose which initially hidden element you would like to animate, and voila: you have created a button which shows an animation in another element. Remember: this type of animation is perfect for showing/hiding images or Textblocks if you don't have enough space on a page.
[Live example!]

init.JPG

 

An animation triggered by user's action

Firstly, you’ll need to create a shape and assign an action to it, either by using the Actions panel or the Animations panel. In both cases, you’ll need to select the element you want to animate. Once selected, click Create animation and the element will appear in the timeline, where you can animate it. Set the initial position, click plus to add a new step, change its properties and set the duration of the step. You can do this by dragging the end keyframe within the timeline or by changing 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 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.