birdman.js

A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman".
See it in action at chrisma.github.io/birdman.js

I'm aware that Birdman was not the first movie to use this effect, but the name is so nice.

Demos for 'words' and 'lines' methods are here.

Setup

Include JQuery (if you haven't already)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">script>

Download the birdman.js file and serve it locally OR load it from a CDN:


<script src="birdman.js">script>

<script src="https://cdn.rawgit.com/chrisma/birdman.js/gh-pages/birdman.js">script>

Initialize the plugin on the content you want birdmanned. This works with any styling.

$('.birdman').birdman();

Configuration

The birdman function takes an object with configuration options. Supported are:

method: The method used to split the text. Default is 'letters'. Other options are 'words' and 'lines'.
order: An array deciding the order in which parts are animated, e.g. ['a','b','c',...], if more than one part is supposed to be animated at the same time, put them in a separate array, e.g. [['a','A'],['b','B'],...]. Default is case insensitive alphabetical order (for the 'letters' method). For 'words' and 'lines' there is no default and this must be set for birdman.js to work.
delay: The amount of milliseconds between each animation. Default is 150.
speedUp: Boolean indicating whether the animation should become faster towards the end. Default is false.

Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian Plugin - Text Expander JS (open beta) This Obsidian plugin allows the user to type text shortcuts that are replaced by (or "expanded into") j

Dec 27, 2022

Animate on scroll library

❗ ❗ ❗ This is README for aos@next ❗ ❗ ❗ For last stable release (v2) go here 🚀 Demo 🌟 Codepen Examples Different built-in animations With anchor set

Jan 2, 2023

An easy way to animate SVG elements.

Walkway I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them (simple demo). It

Jan 2, 2023

Animate your Alpine components.

Animate your Alpine components 🚀 This package provides you with a simple helper to animate your ALpine.js components. Installation The recommended wa

Nov 16, 2022

Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Dec 14, 2022

Comments

Fix how Eager app brings in jQuery

Including jQuery externally would potentially result in different apps all bringing in their own copy of jQuery. Eager can automatically bundle in jQuery such that it doesn't interfere with any other files on the site.

opened by zackbloom 3
added ',' also as the default in special letters.

I was using this but had some trouble as all the ',' were not visible after this effect, so I have added ',' in the special character section for effeciency.

opened by mayuu7 2
method lines and words doesn't work.

I have been trying to use the method lines or words and it just doesn't do anything on the page, though it doesn't throw an error either. You might want to look into it.

$('p').birdman({method: 'lines'});

opened by FrankTrog 2
Cyrillic symbols support

Hello. What I need to make that Cyrillic letters were correctly displayed? Latin letters are displayed correct, but Cyrillic it isn't visible.

Example — http://cssdeck.com/labs/ymuyvw2y

Thanks.

opened by Kristinita 1