January 16, 2013
Movement and animation on the web are concepts that have been widely sought after by site owners, visitors and developers, since the early days of Macromedia’s Flash. As the CSS3 specification is now more widely supported in both desktop and mobile versions of popular browsers, moving things around and about on a webpage, is now more accessible than ever, without the need of additional plugins.
We felt that this would be the appropriate time to include animation support in the 5ml builder, and we dedicated the entire upcoming 2.4 release to just that (*).
After careful thought and lots of discussions we agreed on how we would approach animations into 5ml. The consensus was that we would like the user to have a complete visual representation of what happens to widgets in time, when they move and which of their properties are being altered. As such, we built a timeline-based editor that slides in and out on your canvas, providing a list of widgets along with their properties, and bars that indicate the actual animation of each separate property.
Let’s take a quick look at how animations in 5ml work.
All animations are created within groups. That way, you can create sets of animations that will be triggered when specific conditions are met. There are two default groups: “On Page Enter” and “On Page Leave”. The animations in these groups will either start playing as soon as the user enters the page, or right before the user leaves the page, respectively. Additionally, you can create your own custom groups, which you can trigger on the events that you want, by using the behaviors panel. For instance, you can initiate the playback of an animation group when the user clicks a button, or changes view in a Carousel.
Clicking the “plus” button will bring up the “Add Animation” wizard:
You are then presented with a list of widgets in the current page that are eligible for animation. Selecting a widget will populate the properties drop down menu with the relevant properties that can be animated on the selected widget type. From then on, you can provide the specific details and values for the animation along with the start and end time, loops, the direction of the animation and finally the easing functions.
After the animations are added, you can select them on the timeline in order to perform additional actions on them, such as editing or deleting them. To edit an animation, first select the bar of the animation that you want to alter, and then click on the pencil icon. Alternatively, you can double-click on the bar. This will bring up the “Edit Animation” wizard. Use the same method to delete an animation, by clicking on the respective bar, then clicking on the delete icon on the left.
Finally, you can preview the animation on your page by clicking the “Play” button. (Note: Animation previews will automatically end when the last animation finishes playing. If however there is an animation looping infinitely in the group–denoted by the infinity symbol on the bar—then the preview will continue forever, until you click the “Stop” button).
We are very excited with all the new prospects being opened up by the animation editor, and we strive to enhance it with additional features and animatable properties in future versions (2.4 will support size, position, opacity, background color and rotation). We are really looking forward to hearing your thoughts on animations as well as seeing more projects with “flying colors”
(*And yes, we fixed some bugs too!)