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, in our example above we have it set at 120%, 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). The option we've used in the example above, however, is an element state, which has been set to rollover. This means the animation reverses when the mouse moves off of the image.
Rotate
So carrying on with our previous example, 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 we've made the photos 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. In this scenario we have made the images only rotate a few degrees and varied the direction they rotate in image-to-image. The trigger has been set to an element state of rollover. The effect will only take place when the mouse rolls over this way.
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, 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. In our example below we have set the image to pop-up on mouse click.
