JSFiddle - React, Tailwind, and code Playground

HTML

<div class="resized-splitflap sixthAnimation">  London  </div>
<div class="resized-newyork sixthAnimation"> New York </div>
<div class="resized-dublin sixthAnimation">  Dublin  </div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
 (function ($) {
$(document).ready(function () {
    window.setTimeout(function(){
        var ratio = 0.3;
        $('.resized-splitflap').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px',
             onComplete: function() {
        

            $('.resized-newyork').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px',
            onComplete:function() {
       
                    $('.resized-dublin').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });
    }
        });
    }
    });
    }, 1 * 1000);
    });
        })(jQuery);
    </script>

JavaScript

/* Split Flap Display for jQuery / Maxime Cousinou */
(function ($) {
	'use strict';

	/***************************************************************************
	 * Tools
	 **************************************************************************/

		// Date.now Polyfill
	Date.now = (Date.now || function () {
		return (new Date()).getTime();
	});

	// requestAnimationFrame polyfill by Erik Möller, fixes from Paul Irish and Tino Zijdel
	(function () {
		var lastTime = 0;
		var vendors = [ 'ms', 'moz', 'webkit', 'o' ];

		for ( var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x ) {
			window.requestAnimationFrame = window[ vendors[ x ] + 'RequestAnimationFrame' ];
			window.cancelAnimationFrame = window[ vendors[ x ] + 'CancelAnimationFrame' ] || window[ vendors[ x ] + 'CancelRequestAnimationFrame' ];
		}

		if ( window.requestAnimationFrame === undefined ) {
			window.requestAnimationFrame = function (callback, element) {
				var currTime = Date.now(), timeToCall = Math.max(0, 16 - ( currTime - lastTime ));
				var id = window.setTimeout(function () {
					callback(currTime + timeToCall);
				}, timeToCall);
				lastTime = currTime + timeToCall;
				return id;
			};
		}

		window.cancelAnimationFrame = window.cancelAnimationFrame || function (id) {
			window.clearTimeout(id);
		};
	}());

	// Bind
	var bind = function (method, instance) {
		return function () {
			return method.apply(instance, arguments);
		};
	};

	/***************************************************************************
	 * Letter
	 **************************************************************************/

	/**
	 * Letter Constructor
	 *
	 * @param settings
	 * @constructor
	 */
	function Letter(settings) {
		this.settings = settings;

		this.domObject = document.createElement('div');
		$(this.domObject)
				.css({
					'-webkit-transform-style': 'preserve-3d',
					'-moz-transform-style':    'preserve-3d',
					'-ms-transform-style':    ...