Sencha Animator

What is Sencha Animator?
Sencha Animator is a new tool that makes it easy to create CSS3 transformation-based animations. So easy that you don’t even need a whiff of  CSS3 skills.. !
Actually, working with Animator will look very familiar to anyone who’s used the Flash IDE (or any tool that uses timelines) to create animations.

Let’s walk through a simple Sencha Animator project.

Our finished project will look like this.

First, you’ll need to download and install Animator – get it here.

1. Set Up Your Project
Once you get it up and running you’ll select File–>New Project and set the size (ours is 600×320). Next, save your project (File –> Save) where you can find it again.

New Project

2. Add Images
For our project we’ll be fading in each of the four elements of our logo. Assuming we’ve already separated the logo into PNGs, the first step is to place the images onto the Canvas.
Select the Image Tool and then click anywhere on the Canvas.

Place Image on Canvas

Now we have a placeholder graphic on the Canvas. Let’s link this to our image. Click the button next to the default image name in the General Object panel and browse to your image.

Link to Your Image

While in the Object Panel with your image selected you’ll also want to set the image Name and Position.

Set Name and Position

Repeat these steps with the additional images. You should now have 3 layers in your Object Tree. You can rearrange these so that the layers are stacked correctly.

All Images in Place

3. Well, that’s great – LET’S ANIMATE!
Set the Playhead between 0s and 1s and double-click in the timeline of the bottom layer (ours is called ‘LeftThing’).
This will create a white Keyframe and the Properties for this Keyframe will be displayed.

New Keyframe Added

Under Properties, change the Easing to ‘Linear’. This will connect the Keyframe to another Keyframe at 0s.
Select the Keyframe at 0s and change the Opacity to 0% so that this element will appear to fade in to the scene.
(You can scrub the playhead to watch it fading in — ooohhh, aaahhh!)

Keyframe Opacity at Zero

Repeat this process with the other two images so that each element fades-in on top of each other. Your timeline should look similar to this.

All Images Animated

4. Add Some Text
Let’s create some text and fade that in too.
Select the Text Tool and click on the Canvas.
Just like with the Image Tool, we need to adjust the properties of our new Text Element.
See the screenshot below to see the settings that we used.

Logo Text Properties

To simulate our logo, we duplicated the text layer (Ctrl-D) and changed the Content to a left parenthesis and then repeated to create a right parenthesis. We then positioned and changed the Fill Color of these new text layers to match our RealEyes logo.

Three Text Layers

Next we’ll animate these layers to fade-in like the previous layers.

Text Animated

5. Add Interactivity
Excellent. Now we have a logo whose various elements fade-in and then the animation stops.
So, how hard would it be to add some interactivity and make the animation repeat if the user clicked on the logo?
Here’s how.
Select the top-most image layer (‘Yellow Thing’ in our example) and open the Actions panel. You’ll notice several interactions to choose from.
Select ‘click’ and then ‘Go to next scene’ from the drop-down menu.

Setting Up a Click Action

6. Export the Project
Almost done! Lastly, we need to select File–>Export Project and then FTP this to our favorite web-server or simply open the  html file that Animator creates as it exports the project.
Viola – you have some snappy animation that looks a whole lot like Flash – but isn’t!

With browser support for CSS3 animation growing everyday, designers and developers have been turning to frameworks, libraries and plugins like transform.js, paper.js, move.js and JSAnim to simplify their workflow.   However, making convincing animations with pure code can be a frustrating and ultimately disappointing process. Because successful animation depends on nuance and timing, creating them with some kind of IDE or GUI has always been the natural solution (Flash owes a lot of it’s success to it’s easy to use and powerful timeline controls).

Without getting into advanced easing, multiple scenes, z-axis rotations, etc.., we’re really just scratching the surface of what this tool is capable of. While Sencha Animator is still a work in progress and will never be able to offer the power of the Flash IDE, we’ve seen that Animator is intuitive, easy to learn and offers a time-saving GUI for modifying CSS properties over time.
Another plus – the version that we used (1.2) seemed very stable.