Home / Projects / Animation Builder - CSS Animation Tool

Animation Builder - How to make css animations the easy way.

Filed under: CSS - Animation

Animation Builder relies on Adobe Animate CC to do the heavy lifting needed to save the properties and calculate the percentages needed to animate elements with css. Here is everything you need to know to get up and running with Animation Builder. If anything is unclear, or you need a second pair of eyes, I can be reached on twitter @motionharvest. I believe in you!

Installation

1. Download AnimationBuilder.as to a safe place.

2. Open Adobe Animate CC's Preferences and add a Source Path to the folder where you saved the file. Mine is different than where yours will be.

Preparing our Animation

1. Open Adobe Animate and create a new document.

2. Draw a flying saucer.

3. Convert it to a MovieClip (Modify > Convert to Symbol)

4. Give your flying saucer an instance name

5. Animate your flying saucer using a Classic Tween. We'll get into Motion Tweens and 3D in another article. 

5. Lastly, create a New Layer and name it Actions

 

So far this is just the most basic animation tutorial ever. The most important thing we did do was to give our MovieClip an instance name BEFORE we animated it.  That way the keyframe at the end of the animation also has the instance name flyingSaucer. It will save you a lot of headache if you get in the habbit of naming your instances before you animate!

Using Animation Builder

1. On frame 1 of the Actions layer add this code. 


var ab = new AnimationBuilder(this, {
	"takeoff" : flyingSaucer
});
ab.add('takeoff');

The AnimationBuilder works by looking at a MovieClip instance (in this case flyingSaucer) and saving it's properties at the current time into a CSS animation (in this case named takeoff).

3. Add a keyframe on the Actions layer at the end of your animation and put the following code on it.


ab.add('takeoff');
ab.report();
stop();

As we did before, we are telling AnimationBuilder to capture the properties of flyingSaucer and save it into the animation named takeoff. Then we are generating our CSS with the report() method. And lastly we stop the animation so it doesn't generate repeatedly.

4. Test the Movie (Control > Test Movie). The animation will play and on the last frame the AnimationBuilder will output your CSS.

@keyframes takeoff {
	from {
		transform: matrix(1,0,0,1,411.9,339.5);
		animation-timing-function: linear;
	}
	to {
		transform: matrix(1,0,0,1,411.9,-175.55);
		animation-timing-function: linear;
	}

}
#flyingSaucer {
	animation: takeoff 0.9833333333333333s infinite;
	animation-delay: 0s;
}

 

As you can see, we have a keyframes animation named takeoff and a CSS rule for an element with the ID of #flyingSaucer.

Download my FLA

 

Connecting it to the DOM

Adobe Animate CC has a very handy export option named Export Image (Legacy)  That outputs an SVG.

What's special about this is that any symbol in Adobe Animate CC with an instance name retains that name when the SVG is exported. 

For testing purposes I recommend CodePen.io. Copy the SVG code into the HTML field, and copy the generated CSS into the CSS field.

See The Final Animation