• Stars
    star
    184
  • Rank 209,187 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated over 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Compass extension for creating advanced animations in CSS

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;

Update for version 0.1.3

Two new things! Now you can ask Animation Studio not to generate width and height rules (in case you're, say, using percentages in a responsive design and don't want to have to overwrite pixel-based measurements constantly). By default, this is set to true, meaning that setting it to false won't generate those rules. Here's how you do it:

.tuna {
  @include animation-sequence($tuna-walk-cycle, 1s, false);
  width: 50%; padding-top: 50%
}

It's also possible to refer to just a single frame in an animation sprite without knowing the frame's name, just it's number in the sequence:

.tuna-paused {
  @include animation-still($tuna-walk-cycle, 4);
}

This is useful if you want to have an animation paused on just one particular frame.

Possible Future Goals

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

More Repositories

1

breakpoint

Really simple media queries in Sass
CSS
2,091
star
2

Singularity

Grids without limits
CSS
1,504
star
3

toolkit

Toolkit for Responsive Web Design and Progressive Enhancement with Compass
CSS
912
star
4

color-schemer

A sassy way to build color schemes
CSS
376
star
5

SassyLists

SCSS
275
star
6

jacket

Conditional Styles with Sass. Dress you CSS appropriately.
CSS
232
star
7

Sassy-math

Complex math functions for Sass
CSS
164
star
8

node-sass-import-once

Eyeglass style Import Once, but for all the things!
CSS
94
star
9

Sassy-Maps

Map helper functions for Sass 3.3 and up
CSS
66
star
10

sass-a11y

Accessibility helpers for Sass
CSS
56
star
11

Singularity-extras

singularity-extras
CSS
49
star
12

SUCKS

It's an idea, it's a way of working, it's full of stars. No really, it's about Sass'd Up Consistently Killer Styles. OOCSS, SMACSS and BEM only take you so far. Let's turn it up to 11 and change the world forever!
42
star
13

Sassy-Strings

Advanced string handling for Sass
Ruby
41
star
14

Compass-Extension-Template

A generic template for creating a Compass extension
Ruby
38
star
15

sassytextshadow

Sassy Text Shadow is a Sass mixin that calculates convoluted curvy shadows for css3 text-shadow. It can also be used for box-shadow if you're into that kind of thing.
Ruby
33
star
16

Style-Sites

A responsive style page for style tiles and generating a style guide
JavaScript
32
star
17

navigator

A Ruby testing framework for Sass with Compass
Ruby
12
star
18

generator-compass-extension

Yeoman Generator to create Compass Extensions
JavaScript
11
star
19

uikit

Beautiful and flexable UIs with Sass and Compass
Ruby
9
star
20

canisass

A website to show what features are available in each version of Sass
8
star
21

griddle

Simple set of abstractions for CSS Grid
CSS
6
star
22

try

Sass Mixins for designing in the browser
CSS
2
star
23

yolo

lulz
CSS
2
star
24

Compass-Test-Suite

A generic test suite for Compass extensions
Ruby
1
star