LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

About this pen

Yay, a penny for reading my thoughts!

Kinetic type has always fascinated me, but the video format hasn't. It's so limiting. Once a video is rendered – you're done. You can't do much else with it. With code tho... the journey has just begun. You can change it, make it interactive and reuse it in a million different ways. You're only limited by your creativity and your coding skills.

Kinetic type is the mix of text and motion. If done right, the reading experience can really come to life with story and emotion. The message is no longer only in the text, but in the imagination of the user.

This script weighs in on only 3 Kb... that seriously makes me happy. 3 Kb is negligible. It's virtually nothing. You could have a hundred scripts like these and probably not notice any difference in loading time. That's powerful!

So let's animate more in the browsers, shall we?

This was so much fun to build! Please hit the heart button if you wanna show your support.

If you got any thoughts or questions – please let me know. I love to share the stuff I know!

CSS
@import "https://fonts.googleapis.com/css?family=Rubik+One";
body {
  background-color: rgba(13, 30, 38, 0);
}

#userInput {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 500px;
  top: 300px;
  opacity: 0.01;
}

.input {
  font-family: 'Rubik One', sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  text-align: center;
  border: none;
  border-bottom: 5px solid #337799;
  padding: 0;
  background-color: #0d1e26;
  color: #8cbfd9;
}

.input:focus {
  outline: none;
  border-bottom: 5px solid #8cbfd9;
}

input::-moz-selection {
  background-color: rgba(13, 30, 38, 0);
  color: rgba(140, 191, 217, 0.2);
}

input::selection {
  background-color: rgba(13, 30, 38, 0);
  color: rgba(140, 191, 217, 0.2);
}

.error {
  border-bottom: 5px solid #d98c8c;
}

.error:focus {
  border-bottom: 5px solid #d98c8c;
}

#main {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
}

#kineticType {
  overflow: visible;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (max-width: 400px) {
  #kineticType {
    top: 100px;
  }

  #userInput {
    width: 300px;
    top: 220px;
  }
}
JS
/*

	THIS IS MY MESSAGE TO YOU, RUDY!
	--------------------------------
	
	Stay updated with web animation
	and follow us on Facebook!
	
	www.facebook.com/nerdmanship

*/



//---------------------------------------
//     APP         ----------------------
//---------------------------------------

// INIT SCENE
// CREATE LETTERS
// POSITION LETTERS
// CREATE INPUTS
// INIT INPUTS
// INPUT VALIDATION
// ENTRY SEQUENCE
// SETUP ANIMATION
// UI BEHAVIOR
// ANIMATE LETTER

var numLetters = (window.innerWidth < 400) ? 4 : 12;
var letterPadding = (window.innerWidth < 400) ? 390 : 111;
var letterY = (window.innerWidth < 400) ? 400 : 600;
var inputWidth = 30;
var inputHeight = inputWidth;
var numLinks = 75;
var linkLength = (window.innerWidth < 400) ? 13 : 7;
var strokeWidth = linkLength;
var viewBox = "0 0 1300 975";
var SVGWidth = (window.innerWidth < 400) ? "300" : "400";
var SVGHeight = (window.innerWidth < 400) ? "225" : "300";
var svgns = "http://www.w3.org/2000/svg";
var xlink = 'http://www.w3.org/1999/xlink';
var main = document.getElementById("main");
var inputDiv = document.getElementById("userInput");

var dur; // Animation speed

var l; // dynamic reference to link
var lg; // dynamic reference to link groups
var letg; // dynamic reference to letter group
var validInputs = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", ".", " ", "-", "_", ""]
var validKeys = [190, 189, 32]; for (var i = 65; i <= 90; i++) { validKeys.push(i);	}

// Convenience: Set multiple attributes at once
function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

// Convenience: Return array of links/linkGroups to animated
function linkArr(first, last, type) {
	var arr = [];
	if (type == undefined) {
		type = lg
	}
	for(var i = first; i <= last; i++){
		arr.push( type + i );
	}
	return arr;
}



//-----------------------
//-----------------------	INIT SCENE
//-----------------------

$(initScene( createLetters,	positionLetters, createInputs ));

function initScene (x,y,z) { 

	// Create SVG
	var newSVG = document.createElementNS( svgns, "svg");

	// Set SVG attributes
	setAttributes(newSVG, {
		"id": "kineticType",
		"xmlns": svgns,
		"viewBox": viewBox,
		"width": SVGWidth,
		"height": SVGHeight			
	})

	
	// Create Defs tag
	var newDefs = document.createElementNS( svgns, "defs");
	
	
	// Create path template
	var newPathTemplate = document.createElementNS( svgns, "path");
	
	// Set path attributes
	setAttributes(newPathTemplate, {
		"id": "link",
		"d": "M0 0h" + linkLength,
		"stroke-linecap": "round",
		"stroke-width": strokeWidth		
	})

	
	// Create the mainGroup
	var mainGroup = document.createElementNS( svgns, "g");

	// Set mainGroup attributes
	setAttributes(mainGroup, {
		"id": "mainGroup"
	})

	
	// Append SVG to main div
	main.appendChild(newSVG);

	// Append Defs to SVG
	newSVG.appendChild(newDefs);
		
	// Append path to Defs
	newDefs.appendChild(newPathTemplate);

	// Append mainGroup to SVG
	newSVG.appendChild(mainGroup);
	
	
	x();
	y();
	z();
}





//-----------------------
//-----------------------	CREATE LETTERS
//-----------------------

function createLetters() {
	// Create letterGroups and put them in mainGroup
	for (var i = 0; i < numLetters; i++) {
			
		// Create a letterGroup
		var newLetterGroup = document.createElementNS( svgns, "g");

		// Set letterGroup attributes
		setAttributes(newLetterGroup, {
			"id": "letterGroup" + i,
			"class": "letterGroup",
			"stroke": "hsla(330, 40%, " + random(40,60) + "%, 1)",
			"opacity": "0"
		})
		
		
		// Store previously created link group
		var prevLinkGroup;
		
		// Create Links and nest them in LinkGroups
		for (var j = 0; j < numLinks; j++) { 
			
			// Create a linkGroup
			var newLinkGroup = document.createElementNS( svgns, "g");

			// Set linkGroup attributes
			setAttributes(newLinkGroup, {
				"id": "linkGroup" + i + "-" + j,
				"class": "linkGroup"
			})

			// Create Link
			var newLink = document.createElementNS( svgns, "use");

			// Set Link attributes
			newLink.setAttributeNS(xlink, "xlink:href", "#link");
			setAttributes(newLink, {
				"class": "link",
				"id": "link" + i + "-" + j,
				"x": j*linkLength
			})
			
			// Put the link in the linkGroup
			newLinkGroup.appendChild(newLink);
			
			// Nest linkGroups
			if ( j == 0 ) {
				newLetterGroup.appendChild(newLinkGroup);
			} else {
				prevLinkGroup.appendChild(newLinkGroup);
			}

			// Set previous linkGroup for next iteration 
			prevLinkGroup = newLinkGroup;
		}
		
		
		// Put the letterGroup in the mainGroup
		mainGroup.appendChild(newLetterGroup);
	}
}





//-----------------------
//-----------------------	POSITION LETTERS
//-----------------------

function positionLetters() {
	for (var i = 0; i < numLetters; i++) {
		TweenMax.set(".letterGroup", { rotation: -90, transformOrigin: "left center" })
		TweenMax.set("#letterGroup" + i, { x: i*letterPadding, y: letterY })
	}
}





//-----------------------
//-----------------------	CREATE INPUTS
//-----------------------

function createInputs() {
	for (var i = 0; i < numLetters; i++) {
		var inputGroupWidth = document.getElementById("userInput").clientWidth;
		// Create an input
		var newInput = document.createElement("input");

		var margin = (inputGroupWidth-(numLetters*inputWidth))/(numLetters*2);

		// Set attributes
		setAttributes(newInput, {
			"id": "index" + i,
			"class": "input",
			"data-index": i,
			"maxlength": "1",
			"style": "margin: 0 " + margin + "px; width: " + inputWidth + "px; height: " + inputHeight + "px;"

		})



		// Put input in inputDiv
		inputDiv.appendChild(newInput);
	}
	
	// Connect listeners to inputs
	initInputs();
}





//-----------------------
//-----------------------	INIT INPUTS
//-----------------------

// Initiate inputs after they are created
function initInputs() {
	
	// ADD EVENT LISTENERS TO INPUTS
	// Highlight text of focused inputs
	$(".input").on("focus",function(){ highlightText(this);	});
	// Check valid inputs and initiate animation
	$(".input").keyup(function (e) { checkInput(this, e); });
	
	// SET FIRST STATE OF UI
	// Focus and highlight the first input
	//$(".input").first().focus().select();
	
	// START EXPERIENCE
	entrySequence();
}





//-----------------------
//-----------------------	INPUT VALIDATION
//-----------------------

function checkInput(elem, event) {

	// CHECK IF KEYSTROKE IS VALID
	// Get pressed key
	var key = event.which;
	// Check if valid
	if ($.inArray(key, validKeys) != -1) {
		// If valid
		animationSetup(elem);
		moveToNext(elem);
	} else {
		// If not
		highlightText(elem);
	}
	
	// If user hit backspace, move back and erase
	if ( key == 8 ) {
		moveToPrev(elem);
	}

	// INFORM THE USER
	// Check if 
	if ($.inArray(elem.value.toLowerCase(), validInputs)  == -1) {
		// Show error message if invalid
		$(elem).addClass("error");
	} else {
		// Remove error message
		$(elem).removeClass("error");
	}
}





//-----------------------
//-----------------------	ENTRY SEQUENCE
//-----------------------

function entrySequence() {
	if (window.innerWidth < 400) {
		animate(0, "n", 0)
		animate(1, "e", 0)
		animate(2, "r", 0)
		animate(3, "d", 0)		
	} else {
		animate(0, "k", 0)
		animate(1, "i", 0)
		animate(2, "n", 0)
		animate(3, "e", 0)
		animate(4, "t", 0)
		animate(5, "i", 0)
		animate(6, "c", 0)
		animate(7, "space", 0)
		animate(8, "t", 0)
		animate(9, "y", 0)
		animate(10, "p", 0)
		animate(11, "e", 0)
	}
	
	revealScene();
}

function revealScene() {
	TweenMax.to("body", 0.5, { backgroundColor: "hsla(200, 50%, 10%, 1)" });
	TweenMax.from("#userInput", 0.7, { y: "+=60", ease: Back.easeOut, delay: 0.5 });
	TweenMax.to("#userInput", 0.5, { autoAlpha: 1, delay: 0.5 });
	TweenMax.staggerTo(".letterGroup", 0.5, { autoAlpha: 1, delay: 1 }, 0.05);
}





//-----------------------
//-----------------------	SETUP ANIMATION
//-----------------------

function animationSetup(elem) {
	// Get which input box
	var i = elem.dataset.index;

	// Get which input value
	var input = elem.value;

	// Animate to correlating input value
	switch (input) {
		case "":
			animate(i, "space");
			break;
		case ".":
			animate(i, "dot");
			break;
		case " ":
			animate(i, "space");
			break;
		case "-":
			animate(i, "dash");
			break;
		case "_":
			animate(i, "score");
			break;
		default:
			animate(i, input);
	}
}





//-----------------------
//-----------------------	UI BEHAVIOR
//-----------------------

function highlightText(elem) {
	if (window.innerWidth > 400) {
		$(elem).select();
	} else {
		elem.value = "";
	}
}


function moveToNext(elem) {

	// Focus on the next input box
	var $next = $(elem).next('.input');

	if ($next.length) {
		$(elem).next('.input').focus();
	} else {
		$(".input").first().focus();
	}
}

function moveToPrev(elem) {

	// Focus on the next input box
	var $prev = $(elem).prev('.input');

	if ($prev.length) {
		$(elem).prev('.input').focus();
		elem.value = "";
	} else {
		$(".input").last().focus();
		elem.value = "";
	}
}




//-----------------------
//-----------------------	ANIMATE LETTER
//-----------------------

// Initiate animation with correleting input box and character
function animate(index, letter, seconds) {

	// Normalise input
	var letter = letter.toUpperCase();
	
	// Set dynamic references
	letg = "#letterGroup" + index;
	lg = "#linkGroup" + index + "-";
	l = "#link" + index + "-";
	dur = (seconds == undefined) ? 1 : seconds;
	
	// Reset and start animation
	reset(window[letter]);
}


// Resets properties of links and linkgroups before animating the letter
function reset(letterFunc) {
	var allLinkGroups = linkArr(0,numLinks-1);
	var allLinks = linkArr(0,numLinks-1, l);
	TweenMax.to(letg, 0.2, { attr: { "stroke": "hsla(330, " + random(60,65) + "%, " + random(37,50) + ", 1)" } })
	TweenMax.to(allLinkGroups, dur*2, { rotation: 0, autoAlpha: 1 })
	TweenMax.to(allLinks, dur, { autoAlpha: 1 })
	letterFunc();
}

// Tweening the properties of links and linkgroups to form given letter
function A() {
	var first = -1;
	var last = 64;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(16, 30)
	
	TweenMax.to(c1, dur, { rotation: 180/c1.length })
	TweenMax.to(lg+36, dur, { rotation: 90 })
	TweenMax.to(lg+45, dur, { rotation: 180 })
	TweenMax.to(lg+54, dur, { rotation: 90 })

}

function B() {
	var first = -1;
	var last = 70;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(25, 38);
	var c2 = linkArr(48, 65);

	TweenMax.to(lg+20, dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 180/c1.length } )
	TweenMax.to(lg+43, dur, { rotation: -180 } )
	TweenMax.to(c2, dur, { rotation: 180/c2.length } )
}

function C() {
	var first = 4;
	var last = 56;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(14, 29);
	var c3 = linkArr(40, 55);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(c1, dur, { rotation: -90/c1.length });
	TweenMax.to(lg+13, dur, { rotation: -180 });
	TweenMax.to(c2, dur, { rotation: 180/c2.length });
	TweenMax.to(c3, dur, { rotation: 180/c3.length });
}

function D() { 
	var first = -1;
	var last = 54;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(24, 32);
	var c2 = linkArr(42, 50);

	TweenMax.to(lg+"20", dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 90/c1.length } )
	TweenMax.to(c2, dur, { rotation: 90/c2.length } )
}
function E() {
	var first = -1;
	var last = 61;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"0", dur, { rotation: 90 } )
	TweenMax.to(lg+"9", dur, { rotation: -180 } )
	TweenMax.to(lg+"18", dur, { rotation: 90 } )
	TweenMax.to(lg+"28", dur, { rotation: 90 } )
	TweenMax.to(lg+"35", dur, { rotation: 180 } )
	TweenMax.to(lg+"42", dur, { rotation: 90 } )
	TweenMax.to(lg+"52", dur, { rotation: 90 } )
}
function F() {
	var first = -1;
	var last = 43;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"10", dur, { rotation: 90 } )
	TweenMax.to(lg+"17", dur, { rotation: 180 } )
	TweenMax.to(lg+"24", dur, { rotation: 90 } )
	TweenMax.to(lg+"34", dur, { rotation: 90 } )
}
function G() {
	var first = 4;
	var last = 72;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(30, 45);
	var c3 = linkArr(56, 71);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(c1, dur, { rotation: -90/c1.length });
	TweenMax.to(lg+17, dur, { rotation: -90 });
	TweenMax.to(lg+21, dur, { rotation: 180 });
	TweenMax.to(lg+25, dur, { rotation: 90 });
	TweenMax.to(c2, dur, { rotation: 180/c2.length });
	TweenMax.to(c3, dur, { rotation: 180/c3.length });
}

function H() {
	var first = -1;
	var last = 70;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 180 })
	TweenMax.to(lg+"30", dur, { rotation: -90 })
	TweenMax.to(lg+"40", dur, { rotation: 90 })
	TweenMax.to(lg+"50", dur, { rotation: 180 })

}
function I() {
	var first = 1;
	var last = 40;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+8, dur, { rotation: -180 });
	TweenMax.to(lg+11, dur, { rotation: 90 });
	TweenMax.to(lg+31, dur, { rotation: 90 });
	TweenMax.to(lg+34, dur, { rotation: 180 });

}
function J() {
	var first = 4;
	var last = 48;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(18, 33);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+15, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
}
function K() {
	var first = -1;
	var last = 68;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 180 })
	TweenMax.to(lg+"30", dur, { rotation: -140 })
	TweenMax.to(lg+"43", dur, { rotation: 180 })
	TweenMax.to(lg+"54", dur, { rotation: -75 })
}
function L() {
	var first = -1;
	var last = 38;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"0", dur, { rotation: 90 } )
	TweenMax.to(lg+"9", dur, { rotation: -180 } )
	TweenMax.to(lg+"18", dur, { rotation: 90 } )
}
function M() {
	var first = -1;
	var last = 60;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 150 })
	TweenMax.to(lg+"30", dur, { rotation: -120 })
	TweenMax.to(lg+"40", dur, { rotation: 150 })
}
function N() {
	var first = -1;
	var last = 62;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 155 })
	TweenMax.to(lg+"42", dur, { rotation: -155 })
}
function O() {
	var first = 4;
	var last = 57;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(23, 38);
	var c3 = linkArr(49, 56);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(c2, dur, { rotation: 180/c2.length });
	TweenMax.to(c3, dur, { rotation: 90/c3.length });
}
function P() {
	var first = -1;
	var last = 45;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(25, 40);

	TweenMax.to(lg+20, dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 180/c1.length } )
}
function Q() {
	var first = 4;
	var last = 68;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(23, 38);
	var c3 = linkArr(49, 59);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(c1, dur, { rotation: -90/c1.length });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
	TweenMax.to(c3, dur, { rotation: -90/c1.length });
	TweenMax.to(lg+60, dur, { rotation: -105 });
	TweenMax.to(lg+63, dur, { rotation: 180 });
}
function R() {
	var first = -1;
	var last = 61;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(25, 40);

	TweenMax.to(lg+20, dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 180/c1.length } )
	TweenMax.to(lg+45, dur, { rotation: 180 } )
	TweenMax.to(lg+50, dur, { rotation: 66 } )
}

function S() {
	var first = 4;
	var last = 67;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(18, 40);
	var c3 = linkArr(43, 65);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+15, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -259.25/(c2.length) });
	TweenMax.to(c3, dur, { rotation: 259.25/c3.length });
}
function T() {
	var first = 3;
	var last = 42;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -90 });
	TweenMax.to(lg+24, dur, { rotation: -90 });
	TweenMax.to(lg+30, dur, { rotation: 180 });
}

function U() {
	var first = 4;
	var last = 73;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(6, 13);
	var c2 = linkArr(43, 58);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+5, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+28, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
}

function V() {
	var first = 3;
	var last = 67;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -105 });
	TweenMax.to(lg+25, dur, { rotation: 180 });
	TweenMax.to(lg+46, dur, { rotation: -150 });
}
function W() {
	var first = 2;
	var last = 72;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+2, dur, { rotation: -100 });
	TweenMax.to(lg+22, dur, { rotation: 180 });
	TweenMax.to(lg+42, dur, { rotation: -140 });
	TweenMax.to(lg+47, dur, { rotation: 120 });
	TweenMax.to(lg+52, dur, { rotation: -140 });
}
function X() {
	var first = -1;
	var last = 64;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 25 });
	TweenMax.to(lg+22, dur, { rotation: 180 });
	TweenMax.to(lg+32, dur, { rotation: 130 });
	TweenMax.to(lg+42, dur, { rotation: -180 });
}
function Y() {
	var first = 3;
	var last = 52;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	var c1 = linkArr(15, 22);
	var c2 = linkArr(32, 47);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -90 });
	TweenMax.to(lg+14, dur, { rotation: -90 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+27, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
}
function Z() {
	var first = -1;
	var last = 51;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+0, dur, { rotation: 90 })
	TweenMax.to(lg+10, dur, { rotation: -180 })
	TweenMax.to(lg+20, dur, { rotation: 115 })
	TweenMax.to(lg+42, dur, { rotation: -115 })
}

function DOT() {
	var first = 5;
	var last = 15;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(6, 15);

	TweenMax.to(lg+0, dur, { rotation: 90 } )
	TweenMax.to(lg+5, dur, { rotation: -90 } )
	TweenMax.to(c1, dur, { rotation: 1000/c1.length } )
}

function SPACE() {
	var first = -1;
	var last = 0;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+0, dur, { rotation: 90 })
}

function DASH() {
	var first = 10;
	var last = 20;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+10, dur, { rotation: 90 })
}

function SCORE() {
	var first = -1;
	var last = 11;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+0, dur, { rotation: 90 })
}




// Show production controls true/false & execute
var showControls = false;
showCtrls();

// Use panel true/false & execute
var showInfoPanel = true;
showPanel();

// Reveal info buttom after seconds, or use as callback
var revealInfoButtonAfterSeconds = 5;
revealInfoIcon();

// Customize panel styles to match pen & execute
var upperPanelColor = "hsla(200, 50%, 15%, 1)",
	lowerPanelColor = "hsla(200, 50%, 5%, 1)",
	rectStroke = "hsla(200, 50%, 40%, 1)",
	iconFill = "hsla(200, 50%, 30%, 0.8)",
	iconStroke = rectStroke;
setPanelColors();
Host Instantly Drag and Drop Website Builder

 

Description

Kinetic type has always fascinated me, but the video format hasn't. It's so limiting. Once a video is rendered – you're done. You can't do much else with it. With code tho... the journey has just begun. You can change it, make it interactive and reuse it in a million different ways. You're only limited by your creativity and your coding skills.
Term
Mon, 11/27/2017 - 21:32

Related Codes

Pen ID
Pen ID
Pen ID