jQuery Plugin For Split Flap Text Animation - Flapper

Flapper is a jQuery text display plugin for creating animated split flap text animations that are found in train stations and airports, where they typically display departure and/or arrival information and do that cool flipping of letters to display the new information.

The animations used a rotating stack of letters and numbers printed on hinged panels. As the stack rotated, a new symbol would fall into place. Flapper recreates this effect using CSS3 transforms.

Features:

• Easy to use
• Dark and Light themes
• Comes with six size presets and two color schemes
• Supports for numeric, alphabetic, and alphanumeric displays
• Two Animation Effects, with or without transform

You might also like:

• Airport Information Board Text Effect
• Airport Flight Board Text Effect with jQuery - flightboard

Basic Usage:

1. Include the latest jQuery library and jQuery Flapper Plugin on the web page

<link href="css/flapper.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="src/jquery.flapper.js"></script>

2. Include numberformatter and transform jQuery plugins for best result. But the plugin can also be used on its own with fewer special effects.

<script src="jquery.transform.min.js"></script>
<script src="jquery.numberformatter.min.js"></script>

3. Create a container where you'd like display the animation.

<div class="display">
  <input class="XXL" id="header_display" />
</div>

4. Attach the plugin to the input field and and update the display as follows:

// initialize the plugin
var $header_display = $('#header_display');
$header_display.flapper({
  width: 7,
  chars_preset: 'alpha'
});

// update the display
$('#display').flapper().val('jqueryscript').change(); 

5. Available CSS classes to customize the appearance of the display.

• XS: Extra Small
• S: Small
• M: Medium (Default)
• L: Large
• XL: Extra Large
• XXL: Largest
• light: Light Theme
• dark: Dark Theme

<input class="XXL dark" id="header_display" />

6. All default settings to config the plugin.

$('#anyElement').flapper({

  // The width of the display in digits
  width: 6,

  // A object with options to send to the numberformatter plugin. 
  // This plugin isn't required unless this is set.
  format: null,

  // or 'left'
  align: 'right',

  // Set this to 0 if you're not using the numberformatter plugin and you want to pad your numbers with zeros.
  padding: ' ',

  // If you'd like your own custom stack of letters and numbers, pass an array of characters here. 
  // This value will override the chars_preset value. 
  // You can also pass an array of strings, in which case Flapper will display entire words as a single digit.
  chars: null,

  // or 'alpha', 'alphanum', 'hexnum'
  chars_preset: 'num',

  // Animation duration in milliseconds.
  timing: 250,

  // Min animation duration.
  min_timing: 10,

  // Threshhold in milliseconds.
  threshhold: 100,

  // determine whether to use jQuery transform plugin
  transform: true,

  // Cycle interval
  cycleInterval: null,

  // Callback functions
  on_anim_start: null,
  on_anim_end: null,
  
});

Changelog:

v1.1.4 (2021-03-17)

• Update bower package name
• Remove Trailing Commas in object literals to fix parse error.
• Add in methods for adding and removing flapper digits on the fly
• Changed font url protocol to use https

2015-08-18

• Add in methods for adding and removing flapper digits on the fly

v1.1.3 (2014-02-14)

• Set explicit content-sizing on Flapper elements
• Use jQuery.inArray() to avoid problems with lastIndexOf() and IE8

v1.1.2 (2013-08-11)

• Switch animation mode from fast to slow automatically.

---

This awesome jQuery plugin is developed by jayKayEss. For more Advanced Usages, please check the demo page or visit the official website.