Knowledge Base

Animation actions

Animation actions can practically be applied to any element, this enables the ability to set elements to pulse in size when rolled over with the mouse, the ability to set elements to rotate, ability to open an image in an enlarged view and the ability to show or hide elements through some form of interaction. In this article we are going to look at some use cases and explain how to achieve the animation within the editor.

Scaling

A nice effect with images on a webpage is to have a rollover effect so that those images get slightly larger when the mouse cursor is moved over them.

In order to set this effect up, click on each image and click on Settings in the tools palette, at the bottom of the palette click the button labelled Add Behaviour, in the pop-up window click the animation labelled Scale. Choose to scale the selected element then customize the behaviour options to your specification. Options available here are scale, speed and how you want the scale to trigger. The scale value is how big you want the image to become, the speed value is setting how quickly you want the scale to occur. The final settings are to define how and when you want the trigger to occur. The options available are to have the scale occur on page load, trigger by a mouse event (i.e. click, or hover over). This means the animation reverses when the mouse moves off of the image.

Rotate

Lets look at how adding a rotate effect can make for a nice user experience. By adding a simple white border to the images and a bit of drop shadow in the Style options in the tools palette you can make a photo look like polaroids. To add a rotation effect click on an element, go to Settings in the tools palette,  at the bottom of the palette click the button labelled Add Behaviour, in the pop-up window click the animation labelled Rotate. Choose to rotate the selected element then customize the behaviour options to your specification. Options available here are direction of rotate, degrees of rotate, speed and how you want the rotate to trigger.

Pop Up Image

On our example above we've built up a nice interactive set of photos, what we are going to add to them finally is the ability to pop the images up in a larger view. In a similar way to the previous actions you can add a pop to an image, first click on the images one-by-one and click Settings in the tools palette, at the bottom of the palette click the button labelled Add Behaviour, in the pop-up window click the animation labelled Pop Up Image.