Animation Studio

A Compass extension for recreating traditional animation techniques with CSS3 animations.

Table of Contents

1. Requirements
2. Installation
3. Animation Sequences
4. Possible Future Goals

Requirements

Animation Studio is a Compass extension, so make sure you have Sass and Compass Installed in order to use its awesomeness!

Animation Studio also requires Compass 0.13 (as of this writing, in a stable Alpha stage). Animation studio should install Compass 0.13 for you when you install it, but in case you are getting errors, open up your terminal and type the following in:

gem install compass --pre

This will install Compass 0.13. If you are compiling with CodeKit, Chris Coyier has an awesome writeup on how to get CodeKit playing nice with external gems.

If you are using Bundler (and you should be), be sure to include something like the following in your Gemfile:

gem 'compass', '>=0.13.alpha.4'
gem 'animation-studio', '~>0.1.1'

Installation

gem install animation-studio

If creating a new project

compass create <my_project> -r animation-studio

If adding to existing project, in config.rb

require 'animation-studio'

Import the toolkit partial at the top of your working file

@import "animation-studio";

Animation Sequences

Using the magic of the steps() animation timing function, we can create walkcycles and more. But the method requires careful sprite sheet creation and positioning calculations. It does not lend itself to a fast-paced environment or iterative development process. Until now. By leveraging Sass and Compass, we're able to boil down the process to a set of simple mixins.

The first thing you need to do is create a variable set to the folder name your individual sequence images are in. This is the full path relative to your images directory. The images in the sprite folder should be named alphabetically in the order you'd like them to appear in the sequence.

$tuna-walk-cycle: 'tuna-walk';

If you plan on reusing the same sequence for multiple selectors, add the following next:

@include animation-sequence-sprite-generator($tuna-walk-cycle);

The first parameter is the sequence folder. Extending is the default behavior. If you'd like to change this behavior for all of your sequences, set $animation-sequence-extend: false;

Next, you need to create the keyframes! Doing so is drop dead easy, simply add the following:

@include animation-sequence-keyframes($tuna-walk-cycle);

The first parameter is the sequence folder. By default, the name of the animation will be 'walk-cycle'. You can pass a string as a second parameter in to animation-sequence-keyframes for a different animation name, or you can change the default by changing $animation-sequence-name: 'my-sequence-name';

Finally, in the selector you'd like to use the sequence in, simply add the following:

.tuna {
  @include animation-sequence($tuna-walk-cycle, 1s);
}

The first parameter is the sequence folder and the second is the length of the animation. By default, the name of the animation will be 'walk-cycle'. You can pass a string as a third parameter in to animation-sequence for a different animation name, or you can change the default by changing $animation-sequence-name: 'my-sequence-name';. If you would not like to extend the selector generated with animation-sequence-sprite-generator, you can pass in a fourth parameter $extend: false, or if you'd like to change extending behavior globally, you can set $animation-sequence-extend: false;

Possible Future Goals

• Stacked animations helpers
• Cut outs helper
• Show/hide shortcuts
• Scene transitions
• Stage stack managers