Birdify()

The Mixins

Birdify is, at its core, a set of SASS (well, SCSS really) mixins that define two sets of animations - the flapping motion of a text-bird's "wings", and the flight path of the whole bird.

These mixins require Compass for their flightpath calculation math, so make sure to compile your CSS with compass if you're rolling your own birds.

The Flap

The flapWings mixin is designed to operate on spans of text with subspans of the classes "left wing" and "right wing". For example, to create a bird from a set of brackets ({}), one could use the following markup:

<span class="birdified with-paren">
  <span class="left wing">{</span>
  <span class="right wing">}</span>
</span>

And the following SCSS (which can be found in demo.scss):

.birdified {
  display: inline-block;
}

.birdified.with-paren {
  @include flapWings(0.3s, false, true);
}

Producing a flapping parenthesis pair like this:    {}

By the time you scroll down to see this, the parenthesis will aready be flapping, but the wings also include a short transition animation from non-flapping to flapping, ensuring a smooth transition to flapiness.

The Flightpath

The flight path mixins, buildFlightPath and followFlightPath, are used for constructing and assigning flight path animations to the bird spans. BuildFlightPath takes the desired name of the flight path keyframe set, a series of control points, and the number of interpolation steps, and produces a set of keyframes following a cubic bezier curve. FolloyFligthPath, the path-assignment mixin, accepts a flightpath keyframe set name and a duration as arguments. Let's look at these two in action:

.birdified .fligthpath-1 {
  @include followFlightPath("birdPath-1", 1.5s);
}

@include buildFlightPath("birdPath-1", 
  2px, 10px, 10px, 10px, 500px,- 5px, 16);

The demo SCSS and default CSS include six of these flightpaths, and the utility javascript expects said number based on the .flightpath-n convention.

The Javascript

First off, the JS applier code relies on jQuery. Make sure to include it!

Writing all of the spans needed to birdify text can be tedious, so its much easier to do it programmatically. To that end, birdify.js has you covered. Turning text into birds is pretty easy - use Birdify( your jquery selector ).fly();.

Using this application/bird interface, we can construct the following demo:

<div class="js-demo-birds">
    <button onclick="demo_birds.fly()">Fly</button>
    <button onclick="demo_birds.reset()">Reset</button>
    <div>
      Here are some strong bird candidates: <strong>[ [], (), {}, [0] ], birds.birdify();</strong>
    </div>
    <script type="text/javascript">
      demo_birds = new Birdify(".js-demo-birds", 3);
    </script>
  </div>

Here's a little more detail on the Javascript application-bird interface:

birds = Birdify(selector [, mode]);

birds.fly([timespan [, delay]]);

birds.reset();

Returns all birded text to the place on the page from whence it came, swapping all .birdifieds to .bird-candidates.