Initial import

dist/fluidtype-jquery.js

@@ -0,0 +1,139 @@
+/*jslint browser:true */
+/*global $*/
+$(function() {
+
+	var ACTION_FILL = 1,
+		ACTION_ERASE = 2;
+
+	var defaultOptions = {
+  		strings: [
+  	  		"Hello!",
+  	  		"How are you?"
+  		],
+  		waitFillDuration: 200,
+  		waitEraseDuration: 2000,
+  		animateDuration: 400,
+  		easing: 'swing'
+	};
+
+	function FluidType ($userElem, userOptions) {
+		var _$other,
+			_$elem           = $userElem,
+			_pauseRequested  = false,
+				_currentAction   = ACTION_ERASE,
+				_currentString   = 0,
+				_options         = $.extend({}, defaultOptions, userOptions),
+				_self			 = this;
+
+		this.animateFill = function() {
+			var str = _options.strings[_currentString];
+			_$elem.html(str);
+			_$elem.parent().find(_$other).remove();
+			_$other = _$elem.clone();
+			_$other.css({
+				width: '',
+				position: 'absolute',
+				visibility: 'hidden',
+				display: 'block',
+				left: '-300%',
+			});
+			_$elem.parent().append(_$other);
+
+			_$elem.velocity(
+				{
+					width: _$other.width()
+				}, 
+				{
+					duration: _options.animateDuration,
+					easing: _options.easing,
+					complete: _self.next
+				}
+			);
+		};
+
+		/* 
+		 * Erase 
+		 */
+		this.animateErase = function() {
+			_$elem.velocity(
+				{
+					width: 0 //'= ' + _$other.width()
+				}, 
+				{
+					duration: _options.animateDuration,
+					easing: _options.easing,
+					complete: _self.next
+				}
+			);
+
+		};
+
+		/* 
+		 * Switch to the next action.
+		 * Pause request does not affect Erase => Fill switch 
+		 */
+		this.next = function() {
+			_currentString = (_currentString + 1) % _options.strings.length;
+
+			switch (_currentAction) {
+				case ACTION_ERASE: 
+					_currentAction = ACTION_FILL;
+					setTimeout( 
+					 _self.animateFill.bind(_self),
+					 _options.waitFillDuration 
+					);
+					break;
+				case ACTION_FILL:  
+					if (!_pauseRequested) {
+						_currentAction = ACTION_ERASE;
+						setTimeout(	
+						 _self.animateErase.bind(_self), 
+						 _options.waitEraseDuration 
+						);
+					}
+					break;
+			}
+		};
+
+
+		/* 
+		 * Start animation (again)
+		 */
+		this.start = function() {
+			// choose next string 
+			_pauseRequested = false;
+			_self.next();
+		};
+
+		/* 
+		 * Request animation stop
+		 */
+		this.stop = function() {
+			_pauseRequested = true;
+		};
+
+		/* 
+		 * Set up element properties 
+		 */
+		function initialize() {
+			_$elem.css({ 
+				boxSizing: 'border-box',
+				display: 'inline-block',
+				overflow: 'hidden',
+				whiteSpace: 'nowrap',
+				verticalAlign: 'bottom',
+				width: 0
+			});
+			_self.start();
+		}
+		initialize();
+
+	}
+
+	$.fn.fluidType = function(userOptions) {
+		var $target = $(this);
+		var fluidType = new FluidType($target, userOptions);
+		return fluidType;
+	};
+});
+

dist/fluidtype-jquery.min.js

@@ -0,0 +1 @@
+$(function(){var u={strings:["Hello!","How are you?"],waitFillDuration:200,waitEraseDuration:2e3,animateDuration:400,easing:"swing"};function t(i,t){var n,e=i,a=!1,o=2,s=0,r=$.extend({},u,t),l=this;this.animateFill=function(){var i=r.strings[s];e.html(i),e.parent().find(n).remove(),(n=e.clone()).css({width:"",position:"absolute",visibility:"hidden",display:"block",left:"-300%"}),e.parent().append(n),e.velocity({width:n.width()},{duration:r.animateDuration,easing:r.easing,complete:l.next})},this.animateErase=function(){e.velocity({width:0},{duration:r.animateDuration,easing:r.easing,complete:l.next})},this.next=function(){switch(s=(s+1)%r.strings.length,o){case 2:o=1,setTimeout(l.animateFill.bind(l),r.waitFillDuration);break;case 1:a||(o=2,setTimeout(l.animateErase.bind(l),r.waitEraseDuration))}},this.start=function(){a=!1,l.next()},this.stop=function(){a=!0},e.css({boxSizing:"border-box",display:"inline-block",overflow:"hidden",whiteSpace:"nowrap",verticalAlign:"bottom",width:0}),l.start()}$.fn.fluidType=function(i){return new t($(this),i)}});

example/app.css

@@ -0,0 +1,26 @@
+
+h1 { color: red; }
+
+#text {
+	font-family: Arial, sans-serif;
+	font-size: 40px;
+	font-weight: bold;
+	line-height: 1.3;
+	padding: 60px;
+	border: 1px solid black;
+}
+
+#text .red {
+	padding: 0 0.25em;
+	background-color: #fee;
+}
+
+#text .green {
+	padding: 0 0.25em;
+	background-color: #efe;
+}
+
+#text .blue {
+	padding: 0 0.25em;
+	background-color: #eef;
+}

example/app.js

@@ -0,0 +1,31 @@
+/*jslint browser: true */
+/*global $*/
+$(function () {
+
+	// prepare fluidType initialization parameters
+	var options = {
+  		strings: [
+  	  		"<span class='red'>a technologist.</span>",
+  	  		"<span class='green'>an entrepreneur.</span>",
+  	  		"<span class='blue'>a humanist.</span>"
+  		],
+  		waitFillDuration: 200,
+  		waitEraseDuration: 2000,
+  		animateDuration: 400,
+	};
+
+	// get fluidType object to make it controllable by a button
+	var fluidType =  $('#dynamic').fluidType(options);
+
+	$('input[type=button]').click(function(ev) {
+		var $this = $(this);
+		ev.preventDefault();
+		if ($this.val() === 'Play') {
+			$this.val('Pause');
+			fluidType.start();
+		} else {
+			$this.val('Play');
+			fluidType.stop();
+		}
+	});	
+});

example/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Demo</title>
+
+		<link rel="stylesheet" type="text/css" href="css/app.css"/>
+	</head>
+	<body>
+		<h1>FluidType jQuery Plugin</h1>
+
+		<div id="text">
+			Hello!<br/>
+			My name is Glenn,<br/>
+			I’m <span id="dynamic"></span>
+		</div>
+
+		<input type="button" value="Pause" />
+		<!-- external libraries -->
+		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
+		<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.js"></script>
+		<script src="js/fluidtype-jquery.js"></script>
+
+		<!-- page specific settings -->
+		<script src="js/app.js"></script>
+	</body>
+</html>
+