JQuery Split Flap Text Animation Plugin | Flapper

Flapper is a jQuery plugin that copies the Split-flap (or “Solari”) screens that were popular at train stations and airports, and your father’s alarm clock in the 1970s.

To use, simply attach Flapper to any entry on your page. When the input change event is fired, Flapper will update the display.


  • easy to use.
  • Dark and light themes.
  • It comes in six preset sizes and two color fonts.
  • Supports digital, alphanumeric, and alphanumeric displays.
  • Two animation effects, with or without switching.

How to make use of it:

1. Include the most recent 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 the greatest end result.

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

3. Create a container for the place you want to show the animation.

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

4. Attach the plugin to the input subject and update the show as follows:

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

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

5. Available CSS classes to customize the looks of the show.

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

6. All default settings to config the plugin.


  // 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,  

Character presets are:

  • num&nbsp;, 1-9, 0, dollar sign, decimal point, comma, colon
  • hexnum&nbsp;, 1-9, A-F, 0
  • alpha&nbsp;, A-Z
  • alphanum: All of alpha and num

Flapper’s size presets work like this:

.flapper.S sets the height of each digit.

.flapper.S .digit div sets the height (again!) and width of each digit.

.flapper.S .digit div.top clips the top half of each digit.

.flapper.S .digit div.bottom clips the bottom half of each digit, minus one pixel at the top (the horizontal stripe.)

jQuery Plugin For Split Flap Text Animation, Flapper Plugin/Github, jquery airport board effect, split flap display simulator, jaykayess flapper, flapper github, flapper js


See Demo And Download

Official Website(jayKayEss): Click Here

This superior jQuery/javascript plugin is developed by jayKayEss. For extra advanced usage, please go to the official website.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

Leave a Reply

Your email address will not be published. Required fields are marked *