Help Centre

Animating Elements

You can easily add animation to text, images and buttons throughout your page.

Example.

Published.

Step 1. Select Element to Animate

You can select any element on the page to animate (text, image, button or shapes). On the properties panel you will need to click the animation tab (see below and then select the animation type.

Animation Types

All current animations fade from fully transparent to the set opacity for the element. On top of that you can:

Move In - Moves and fades in at a consistent speed (best for most purposes)
Hustle In - Animation begins at faster pace.
Ease In - Animation slowly eases into place.
Spin - Animation will spin on your page.
Pulse - Animation will fade in and out.
Back and Forward - Animation will travel back and forward on the page.

Step 2. Configure

From here you can configure the details of the animation. Below are the types of things you can configure.

Configurations

Fade in From: Specifies whether there is to be any movement. To keep still select current, but you can select to move it from the left, top, right or bottom.
Distance: If you select for it to move a direction you can then add in how far it should move in pixels
Duration: This is the time, in seconds, that the animation should take. You can make your animations super fast by specifying in tenths of a second (e.g. 0.1 or 0.25 etc)
Delay: All the animations occur when the user reaches that part of the page. By default, there is no delay which means once the user scrolls to that part of the page the animation will initiate. You can add a delay in seconds so the user will wait for the animation to begin.

Step 3. Publish & Preview

To preview the animation you will need to view your draft version of the page or the published version of the page. Quick Preview will not display the animations.

You can keep adjusting your animations until you get it just right.