I’d like to introduce Animatable. It’s a new browser-based tool that makes animating with CSS easy. Animatable can be used by designers, developers or animators. You needn’t know much about CSS or animation to produce amazing results with Animatable. Here’s a taste of what it’s like to create animations with Animatable.
Animatable helps you create complex, multi-scene CSS animations. This is the storyboard view that shows the sixteen individual animations that make up our Madmanimation demo.
Each new scene is automatically numbered as you create them, or you can give them a more recognisable name and a thumbnail that’ll be used as one of the fallback options for browsers that don’t natively support CSS animation.
In the document properties, you can change the name of the animation as well as the size and background colour of the stage. You can also see the number of scenes and the total length of your animation.
I’m going to show you three scenes.
We wanted Animatable to be easy to use, even if you’ve no experience of animating with CSS, so we designed Animatable’s interface and controls from the ground up.
Now you’re in the scene view. This is scene one. We kept the interface clutter free and Animatable only shows you the tools you need, when you need them.
Along the bottom, is a simple timeline and — as I’ve already made this animation in advance — I can scrub along the timeline and watch as the three animated elements (the background image, the fan and the figure) rotate, translate and scale using CSS. I can also press play — and pause — and see the animation’s duration in minutes, seconds and even milliseconds.
Next I’ll show you how simple it is to animate an element with Animatable.
Here’s a more complex scene. I’ll scrub along the timeline and you’ll see there’s over a dozen elements that make up the animation. If you look closely, you’ll notice that the pink fan is static. You need to fix that.
To add a keyframe, simply move the marker to a spot along the timeline, say, eight seconds.
Now click on the fan and all of the animatable options appear in the toolbar on the right. You can change an element’s dimensions, colours and even add rounded corners using CSS border-radius. You can also transform it in two or three-dimensional space.
Set the fan to rotate six times and now as I scrub along the timeline, you’ll see the fan rotating. Animatable really does make animating that easy.
Finally, I’ll show you how to add element to your animation.
Along the top of the Animatable interface, we have four tool buttons:
— select
— drag to create a division
— a text object that works with Web Fonts.
And an image import button. I can also simply drag an image into Animatable from a Finder or Explorer window.
I’ll choose an image from my Finder and drag it onto the stage.
With the image imported, I’ll set the starting points for the animation.
First select the figure on the stage — and set the translate and scaling values to move and size the figure.
Next, I’ll move the marker along the timeline to six seconds, then change the translate, scale and rotate values to animate the falling figure. As the figure’s properties now change at six seconds, Animatable automatically adds a keyframe marker on the timeline.
Move back to the start on the timeline and press the play button.
That’s just a small part of what Animatable can do to help you make CSS animations. Follow @animatableapp on Twitter and we’ll be sharing more from Animatable in the weeks to come.