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>

Fly Reset Here are some strong bird candidates: [ [], (), {}, [0] ], birds.birdify();

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

birds = Birdify(selector [, mode]);

selector is the selector defining the region to operate on.

mode is the type of birds you want to create. Defaults to parenthesis-based birds(1), but can be set to text-birds or both using the values 2 and 3 respectively.

Returns a Birdify object on which to call fly().

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

Sets birds aflap by converting the .bird-candidate tags to .birdified tags

timespan is the length of time over which all selected birds should launch.

delay is the time to wait before launching the first bird.

birds.reset();

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