animate 0.1.alpha.0

data/README.md

@@ -0,0 +1,191 @@
+Compass Animate
+===============
+
+This is the new home for 
+Eric Meyer's Compass port of
+[animate.css][animate]
+by [Dan Eden][dan].
+It is splitting off from
+[compass-animation][ca]
+because the majority of that plugin
+has moved into [Compass 0.13][c13].
+This plugin is for people on the Compass edge,
+while that plugin remains useful 
+to people who are still using Compass 0.12.
+
+Compass Animate requires
+Compass 0.13 (currently in alpha).
+
+```bash
+gem install compass-animate
+```
+
+```ruby
+# config.rb
+@require "animate"
+```
+
+```scss
+// *.scss
+@import "animate";
+```
+
+[animate]: http://daneden.me/animate/
+[dan]: http://daneden.me/
+[ca]: https://github.com/ericam/compass-animation
+[c13]: http://beta.compass-style.org/reference/compass/css3/animation/
+
+## Usage
+
+We try our best to stay up to date
+with the latest from Dan Eden,
+but we've also made a few changes
+and expanded on his base.
+
+You can include any number of named animation keyframes,
+each one with or without it's related class name.
+
+The most basic option is simply:
+
+```scss
+// Include all the animation keyframes:
+@include animate;
+```
+
+But you can get much more detailed:
+
+```scss
+// Temlate:
+// @include animate[-animationName]([$sub: all, $class: false]);
+```
+
+Let's say you want just the "flash" animation:
+
+```scss
+// Include only the flash animation keyframes
+@include animate-flash;
+```
+
+But you also want a pre-defined class
+that calls that animation:
+
+```scss
+// Include only the flash animation keyframes,
+// with associated class name:
+@include animate-flash($class:true);
+```
+
+That will output:
+
+```css
+@-moz-keyframes flash { 0% { opacity: 1; }
+  25% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 0; }
+  100% { opacity: 1; } }
+
+@-webkit-keyframes flash { 0% { opacity: 1; }
+  25% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 0; }
+  100% { opacity: 1; } }
+
+@-o-keyframes flash { 0% { opacity: 1; }
+  25% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 0; }
+  100% { opacity: 1; } }
+
+@-ms-keyframes flash { 0% { opacity: 1; }
+  25% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 0; }
+  100% { opacity: 1; } }
+
+@keyframes flash { 0% { opacity: 1; }
+  25% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 0; }
+  100% { opacity: 1; } }
+
+.flash { 
+  -webkit-animation-name: flash; 
+     -moz-animation-name: flash; 
+      -ms-animation-name: flash; 
+       -o-animation-name: flash; 
+          animation-name: flash; }
+```
+
+Now you have the named keyframes
+for the "flash" animation
+and a class name that you can use in your HTML
+or extend with Sass.
+
+You can also set `$class` to `silent`
+and get `%flash`
+which can be used with `@extends`
+but won't show up in the css.
+
+There are a few shortcuts as well:
+
+```scss
+// this:
+@include animate-fadeIn;
+@include animate-fadeOut;
+@include animate-fadeOutBig;
+
+// is equal to this:
+@include animate-fade(in-only out-only outBig);
+```
+
+If you want all the fadeOut animations:
+
+```scss
+@include animate-fade(out);
+```
+
+## Animations
+
+This plugin includes the following _mixins_ & animations:
+
+**Attention**
+- _attention_
+- flash, bounce, shake, tada, swing, wobble, wiggle, pulse
+
+**Flip** (currently Webkit, Firefox, & IE10 only)
+- flip, _flipX_, _flipY_
+- _flipIn_, flipInX, flipInY
+- _flipOut_, flipOutX, flipOutY
+
+**Fade**
+- _fade_
+- fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, 
+  fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig
+- fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight,
+  fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig
+
+**Bounce**
+- _bounce_
+- bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight
+- bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight
+
+**Roll**
+- _roll_
+- rollIn
+- rollOut
+
+**Rotate**
+- _rotate_
+- rotateIn, rotateInDownLeft, rotateInDownRight, 
+  rotateInUpLeft, rotateInUpRight
+- rotateOut, rotateOutDownLeft, rotateOutDownRight, 
+  rotateOutUpLeft, rotateOutUpRight
+
+**Lightspeed**
+- _lightSpeed_
+- lightSpeedIn
+- lightSpeedOut
+
+**Special**
+- _special_
+- hinge

data/lib/animate.rb

@@ -0,0 +1,9 @@
+require 'compass'
+Compass::Frameworks.register("animate", :path => "#{File.dirname(__FILE__)}/..")
+
+module Animate
+
+  VERSION = "0.1"
+  DATE = "2012-05-24"
+
+end

data/stylesheets/_animate.scss

@@ -0,0 +1,40 @@
+// ---------------------------------------------------------------------------
+// Animations from Animate.css
+// Author : Dan Eden
+// URL    : http://daneden.me/animate/
+// ---------------------------------------------------------------------------
+// imports
+
+@import "helpers";
+
+@import "animate/attention";
+@import "animate/bounce";
+@import "animate/fade";
+@import "animate/flip";
+@import "animate/lightspeed";
+@import "animate/roll";
+@import "animate/rotate";
+@import "animate/special";
+
+// ---------------------------------------------------------------------------
+// animate [ attention | bounce | fade | flip | 
+//           lightSpeed | rotate | special | all ]
+
+@mixin animate($sub: all, $class: $default-animation-class-mode) {
+  $sub        : compact($sub);
+  $attention  : yepnope($sub, all attention);
+  $bounce     : yepnope($sub, all bounce);
+  $fade       : yepnope($sub, all fade);
+  $flip       : yepnope($sub, all flip);
+  $lightSpeed : yepnope($sub, all lightspeed);
+  $rotate     : yepnope($sub, all rotate);
+  $special    : yepnope($sub, all special);
+  @if $attention  { @include animate-attention  (all, $class); } 
+  @if $bounce     { @include animate-bounce     (all, $class); } 
+  @if $fade       { @include animate-fade       (all, $class); } 
+  @if $flip       { @include animate-flip       (all, $class); } 
+  @if $lightSpeed { @include animate-lightSpeed (all, $class); } 
+  @if $rotate     { @include animate-rotate     (all, $class); } 
+  @if $special    { @include animate-special    (all, $class); } 
+}
+

data/stylesheets/_helpers.scss

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------------
+// animation class mode: true | false | silent
+
+$default-animation-class-mode: silent !default;
+
+// ---------------------------------------------------------------------------
+// animated class for external use
+@mixin animated-class($class: $default-animation-class-mode) {
+  $selector: if($class == 'silent', '%animated', '.animated');
+  #{$selector} { @include animation(1s ease both); }
+}
+
+// ---------------------------------------------------------------------------
+// animation-class
+
+@mixin animation-class($name, $class: $default-animation-class-mode) {
+  $selector: if($class == 'silent', '%', '.') + $name;
+  @if $class {
+    #{$selector} { 
+      @include animation-name($name); 
+      @content;
+    } 
+  }
+}
+
+// ---------------------------------------------------------------------------
+// yepnope
+
+// Take a $list, return true if any $args are present.
+@function yepnope($list, $args) {
+  $list     : compact($list);
+  $return   : false;
+  @each $arg in $args {
+    $return: if(index($list,$arg), true, $return); 
+  }
+  @return $return; 
+}

data/stylesheets/animate/_attention.scss

@@ -0,0 +1,32 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "attention/flash";
+@import "attention/shake";
+@import "attention/tada";
+@import "attention/swing";
+@import "attention/wobble";
+@import "attention/pulse";
+@import "attention/wiggle";
+
+// ---------------------------------------------------------------------------
+// attention [ flash | shake | tada | 
+//             swing | wobble | pulse | wiggle ]
+
+@mixin animate-attention($sub: all, $class: $default-animation-class-mode) {
+  $sub      : compact($sub);
+  $flash    : yepnope($sub, all flash);
+  $shake    : yepnope($sub, all shake);
+  $tada     : yepnope($sub, all tada);
+  $swing    : yepnope($sub, all swing);
+  $wobble   : yepnope($sub, all wobble);
+  $pulse    : yepnope($sub, all pulse);
+  $wiggle   : yepnope($sub, all wiggle);
+  @if $flash    { @include animate-flash    ($class); } 
+  @if $shake    { @include animate-shake    ($class); } 
+  @if $tada     { @include animate-tada     ($class); } 
+  @if $swing    { @include animate-swing    ($class); } 
+  @if $wobble   { @include animate-wobble   ($class); } 
+  @if $pulse    { @include animate-pulse    ($class); } 
+  @if $wiggle   { @include animate-wiggle   ($class); } 
+}

data/stylesheets/animate/_bounce.scss

@@ -0,0 +1,63 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "bounce/bounceIn";
+@import "bounce/bounceOut";
+
+// ---------------------------------------------------------------------------
+// bounce [ in | inUp | inDown | inLeft | inRight | 
+//          out | outUp | outDown | outLeft | outRight |
+//          up | down | left | right | only | all ]
+
+@mixin animate-bounce($sub: all, $class: $default-animation-class-mode) {
+  $sub      : compact($sub);
+  $only     : yepnope($sub, all only);
+  $in       : yepnope($sub, all in);
+  $inUp     : yepnope($sub, all in inUp up);
+  $inDown   : yepnope($sub, all in inDown down);
+  $inLeft   : yepnope($sub, all in inLeft left);
+  $inRight  : yepnope($sub, all in inRight right);
+  $out      : yepnope($sub, all out);
+  $outUp    : yepnope($sub, all out outUp up);
+  $outDown  : yepnope($sub, all out outDown down);
+  $outLeft  : yepnope($sub, all out outLeft left);
+  $outRight : yepnope($sub, all out outRight right);
+  @if $in         { @include animate-bounceIn       ($class); }
+  @if $inUp       { @include animate-bounceInUp     ($class); }
+  @if $inDown     { @include animate-bounceInDown   ($class); }
+  @if $inLeft     { @include animate-bounceInLeft   ($class); }
+  @if $inRight    { @include animate-bounceInRight  ($class); }
+  @if $out        { @include animate-bounceOut      ($class); }
+  @if $outUp      { @include animate-bounceOutUp    ($class); }
+  @if $outDown    { @include animate-bounceOutDown  ($class); }
+  @if $outLeft    { @include animate-bounceOutLeft  ($class); }
+  @if $outRight   { @include animate-bounceOutRight ($class); }
+
+  $name: bounce;
+  @if $only {  
+    @include keyframes($name) {
+      0% {
+        @include translateY(0); 
+      }
+      20% {
+        @include translateY(0); 
+      }
+      40% {
+        @include translateY(-30px); 
+      }
+      50% {
+        @include translateY(0); 
+      }
+      60% {
+        @include translateY(-15px); 
+      }
+      80% {
+        @include translateY(0); 
+      }
+      100% {
+        @include translateY(0); 
+      } 
+    }
+    @include animation-class($name, $class) {}
+  }
+}

data/stylesheets/animate/_fade.scss

@@ -0,0 +1,52 @@
+// ---------------------------------------------------------------------------
+// imports
+
+@import "fade/fadeIn";
+@import "fade/fadeOut";
+
+// ---------------------------------------------------------------------------
+// fade [ in | inUp | inDown | inLeft | inRight | 
+//        inUpBig | inDownBig | inLeftBig | inRightBig | 
+//        out | outUp | outDown | outLeft | outRight |
+//        outUpBig | outDownBig | outLeftBig | outRightBig |
+//        up | down | left | right | big | all ]
+
+@mixin animate-fade($sub: all, $class: $default-animation-class-mode) {
+  $sub          : compact($sub);
+  $in           : yepnope($sub, all in);
+  $inUp         : yepnope($sub, all in inUp up);
+  $inDown       : yepnope($sub, all in inDown down);
+  $inLeft       : yepnope($sub, all in inLeft left);
+  $inRight      : yepnope($sub, all in inRight right);
+  $inUpBig      : yepnope($sub, all in inUp up big);
+  $inDownBig    : yepnope($sub, all in inDown down big);
+  $inLeftBig    : yepnope($sub, all in inLeft left big);
+  $inRightBig   : yepnope($sub, all in inRight right big);
+  $out          : yepnope($sub, all out);
+  $outUp        : yepnope($sub, all out outUp up);
+  $outDown      : yepnope($sub, all out outDown down);
+  $outLeft      : yepnope($sub, all out outLeft left);
+  $outRight     : yepnope($sub, all out outRight right);
+  $outUpBig     : yepnope($sub, all out outUp up big);
+  $outDownBig   : yepnope($sub, all out outDown down big);
+  $outLeftBig   : yepnope($sub, all out outLeft left big);
+  $outRightBig  : yepnope($sub, all out outRight right big);
+  @if $in           { @include animate-fadeIn           ($class); }
+  @if $inUp         { @include animate-fadeInUp         ($class); }
+  @if $inDown       { @include animate-fadeInDown       ($class); }
+  @if $inLeft       { @include animate-fadeInLeft       ($class); }
+  @if $inRight      { @include animate-fadeInRight      ($class); }
+  @if $inUpBig      { @include animate-fadeInUpBig      ($class); }
+  @if $inDownBig    { @include animate-fadeInDownBig    ($class); }
+  @if $inLeftBig    { @include animate-fadeInLeftBig    ($class); }
+  @if $inRightBig   { @include animate-fadeInRightBig   ($class); }
+  @if $out          { @include animate-fadeOut          ($class); }
+  @if $outUp        { @include animate-fadeOutUp        ($class); }
+  @if $outDown      { @include animate-fadeOutDown      ($class); }
+  @if $outLeft      { @include animate-fadeOutLeft      ($class); }
+  @if $outRight     { @include animate-fadeOutRight     ($class); }
+  @if $outUpBig     { @include animate-fadeOutUpBig     ($class); }
+  @if $outDownBig   { @include animate-fadeOutDownBig   ($class); }
+  @if $outLeftBig   { @include animate-fadeOutLeftBig   ($class); }
+  @if $outRightBig  { @include animate-fadeOutRightBig  ($class); }
+}

data/stylesheets/animate/_flip.scss

@@ -0,0 +1,83 @@
+// ---------------------------------------------------------------------------
+// special class handling
+
+@mixin flip-class($name, $class: $default-animation-class-mode) {
+  @include animation-class($name, $class) {
+    @include backface-visibility(visible);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// imports 
+
+@import "flip/flipIn";
+@import "flip/flipOut";
+
+// ---------------------------------------------------------------------------
+// flip [ only | in | out | x | y | all |
+//        flipIn | flipInX | flipInY | 
+//        flipOut | flipOutX | flipOutY |
+//        flipX | flipY ]
+
+@mixin animate-flip($sub: all, $class: $default-animation-class-mode) {
+  $sub        : compact($sub);
+  $only       : yepnope($sub, all only);
+  $flipInX    : yepnope($sub, all flipIn flipInX flipX in x);
+  $flipInY    : yepnope($sub, all flipIn flipInY flipY in y);
+  $flipOutX   : yepnope($sub, all flipOut flipOutX flipX out x);
+  $flipOutY   : yepnope($sub, all flipOut flipOutY flipY out y);
+
+  @if $flipInX    { @include animate-flipInX    ($class); } 
+  @if $flipInY    { @include animate-flipInY    ($class); } 
+  @if $flipOutX   { @include animate-flipOutX   ($class); } 
+  @if $flipOutY   { @include animate-flipOutY   ($class); } 
+
+  $name: flip;
+  @if $only {
+    @include keyframes($name) {
+      0% {
+        @include transform(perspective(400px) rotateY(0));
+        @include animation-timing-function(ease-out);
+      }
+      40% {
+        @include transform(perspective(400px) translateZ(150px) rotateY(170deg));
+        @include animation-timing-function(ease-out);
+      }
+      50% {
+        @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
+        @include animation-timing-function(ease-in);
+      }
+      80% {
+        @include transform(perspective(400px) rotateY(360deg) scale(0.95));
+        @include animation-timing-function(ease-in);
+      }
+      100% {
+        @include transform(perspective(400px) scale(1));
+        @include animation-timing-function(ease-in);
+      }
+    }
+    @include flip-class($name, $class);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// flipX [ in | out | all ]
+
+@mixin animate-flipX($sub: all, $class: $default-animation-class-mode) {
+  $sub  : compact($sub);
+  $in   : yepnope($sub, all in);
+  $out  : yepnope($sub, all out);
+  @if $in   { @include animate-flipInX  (all, $class); } 
+  @if $out  { @include animate-flipOutX (all, $class); } 
+}
+
+// ---------------------------------------------------------------------------
+// flipY [ in | out | all ]
+
+@mixin animate-flipY($sub: all, $class: $default-animation-class-mode) {
+  $sub  : compact($sub);
+  $in   : yepnope($sub, all in);
+  $out  : yepnope($sub, all out);
+  @if $in   { @include animate-flipInY  (all, $class); } 
+  @if $out  { @include animate-flipOutY (all, $class); } 
+}