Home of:

5ml, Developer Resources

I Like to Move It, Move It

0
Sotiris Frontend Developer | 5ml
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!)

 

 

Leave a Reply

 

See What People
Are Saying

tmobile-logo

“T-Mobile was able to delight customers with a fun game that could work across virtually any phone, with Velti making it possible. Velti was great to work with & their commitment to the success of the program was excellent.” - Chad Hodge, T-Mobile USA

Pic Stitch_logo

“The thing I love about Mobclix is its simplicity--sign up & you have instant access to over 35 ad networks. Not only that, but I’ve already seen a 400% increase in revenue from March, and 12M impressions a week!” - Alex Keim, Creator of Pic Stitch, Big Blue Clip  

Halfbrick

"Mobclix greatly helps manage & control the quality of our ads, and as a result, our Fruit Ninja app made over $400,000 in April 2012 alone off of ad-network sales." - Jared Oats, Advertising Manager, Halfbrick

tinyco

“TinyCo is thrilled to be working with the Velti Exchange—we’ve seen great results from the campaigns we’ve run so far and are excited about the future of our relationship!” - Growth & User Acquisition Team, Tinyco

mtc_logo_n

“We strongly believe that mobile marketing and advertising is here and we have already taken the first successful steps in partnering with Velti in this new era for the mobile industry.” - MTC Russia

mbcgroup

“Velti has shown consistent respect for policies and procedures, in addition to designing and implementing the campaigns. We look forward to continuing this fruitful cooperation in the future.” - MBC Group

Follow us

 

Who is Velti?

Subscribe to Newsletter