March 27, 2013
For some peculiar reason, the human species tends to favor big, round and easy numbers. For instance, the celebration was special for most of the denizens of this planet when the calendar turned to the year 2000 (though we –the nerdier ones- will throw the big celebration on the year 2048). Two point five is not a very round number per se, but in terms of software development, it’s a pretty big one. And as such, we wanted to celebrate 5ml’s 2.5 release by packing it with features upon features and tidbits for you to play with, and make your life easier.
Animate in Depth
In 2.4 we introduced the animation editor. It’s time we took it a step further and expanded it to the third dimension. The “transform” css property is now among the available animatable properties in the editor. You can translate, rotate, scale and skew any widget in 2D or 3D and perform animations on those properties. That beautiful 3D animation that you always wanted to make is now just a few clicks away. For instance:
This rotating cube above took literally 4 minutes to create. Two minutes to construct it on the page, one minute to add the animations on the timeline, and one more minute for polishing, small tweaks and a glass of water. Make sure you check the example above on a browser that supports CSS 3D transformations (currently Chrome, Firefox and Safari).
Animate with Speed
Let’s not stray away from the animation editor just yet though. Up to now, the animation timeline was a nifty representation of what’s going on animation-wise in your project. While it’s cool and all, it was just that… a representation. We didn’t like that, so we changed it to be a useful and interactive tool. Don’t like the timing of your animations?
No problem. Drag the bars and move them around the timeline, all the while changing each animation start and end times visually. Feeling unhappy with the duration of your animations? Simply drag the edge of the bars and expand them or contract them in time. 5ml will safeguard you and prevent you from making any mistakes in the timing of your animations. Easy-peasy lemon-squeezy.
Animate with Ease
And just before we move away from animations, we also added 21 new easing functions that you can apply to your animations, or transitions. Cubic, Quadratic, Circular, Exponential–it’s all there. The full Monty!
Points in Transition
But why settle with just easing functions for transitions and not add some more transitions while at it? We’ve added two more 3D transition effects in the lot. The “Flip” transition, which acts like a flipcard, and the “Swap” transition where the first view retreats to one side, while the second view, emerges into the screen from deep:
Why No U Transform?
While there has been support for CSS 3D transformation on 3D capable browsers, barring the rotation of widgets, all of the 2D transformations had been neglected. But that’s not the case anymore. We stripped the rotation property from the Appearance properties tab, and tucked it in neatly in the Transformation properties tab which is now always available for all widgets. By default, translateX, translateY, rotateZ, scaleX, scaleY, skewX and skewY are enabled. If the widget is inside a 3D Stage (and the browser supports CSS 3D Transforms), then translateZ, rotateX, rotateY, and scaleZ are also enabled.
Let’s not drag this. Or maybe… let’s just drag it some more
Putting a couple of widgets on the page and playing around with them is not that much of a daunting task (if there was ever any in 5ml). However, in a project that has tens, if not hundreds, of elements on the page, manipulating the widgets can become a nuisance. We decided that this should no longer be a cause for frustration, and we tweaked the Page Outline so it transforms into a powerful and time saving tool. You can now drag new widgets on the Page Outline tree instead of the page, and they will stay exactly where you dropped them, in that particular position on the page. Want to put a Facebook Like widget inside a VBox which is squeezed among 34 other widgets on the page? Just drag the widget from the library and hover it over the VBox entry in the Page Outline. Wait two seconds there and the VBox will expand. Then proceed to drop it inside the VBox at the exact location you want.
And if you drop the Facebook Like Widget at an undesirable position by mistake, worry not! Click on its entry inside the Page Outline, and drag it somewhere else on the Page Outline… or even on the page itself!
Speaking of Facebook Like, we had a “one-on-one” with the widget and it complained about its solitude. We were so moved by its plea, and as such we brought on board the whole array of its Facebook Social Plugins siblings. Apart from the “Facebook Like Button”, you can now add the “Facebook Send to a Friend”, “Facebook Comments”, “Facebook Recommend”, “Facebook Likebox” and “Facebook Facepile” plugins as widgets onto your page.
The rule for programming is that “He, who codes for 24 hours, debugs for 6 months”. As usual, we have located and eradicated quite a few well-hidden bugs. We can sleep with the windows open now.
Ready to use (2.)5ml yet?? Login, or get started, here. We are excited with the features in this upcoming release, and even more we are looking forward to seeing what spectacular projects our users will come up with using these new features.