12+ JavaScript Text Animation Examples

This post contains a total of 12+ JavaScript Text Animation Examples with Source Code. All these Text Animations are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Text Animation Examples

1. Particle Text Effect

Made by Tom. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
	margin: 0;
	overflow: hidden;
}

#instructions {
	position: absolute;
	color: #fff;
	bottom: 0;
	padding-bottom: 6px;
	font-family: sans-serif;
	width: 100%;
	text-align: center;
	pointer-events: none;
}
</style>
</head>
<body>
  <div id="three-container"></div>

<div id="instructions">
	click and drag to control the animation
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/bas.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/TextGeometry.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/FontUtils.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/pnltri.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/droid_sans_bold.typeface.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
      <script>
//capture the window loading
window.onload = init;

function init() {
  var root = new THREERoot({
    createCameraControls: false,
    antialias: true,
    fov: 60 });


  //setup the scene

  root.renderer.setClearColor(0x3AAFA9);
  root.renderer.setPixelRatio(window.devicePixelRatio || 1);
  root.camera.position.set(0, 0, 400);


  //create the text animation variable

  var textAnimation = createTextAnimation();
  textAnimation.position.y = -10;
  root.scene.add(textAnimation);

  //set the timeline aspects of the animation

  var tl = new TimelineMax({
    repeat: -1, //-1 loop
    repeatDelay: 0.25,
    yoyo: true });

  tl.fromTo(textAnimation, 4, //4
  { animationProgress: 0.0 },
  { animationProgress: 1.0, ease: Power1.easeInOut },
  0);


  createTweenScrubber(tl);
}

//create the text to be animated

function createTextAnimation() {
  var geometry = generateTextGeometry('GONE WITH THE WIND', {
    size: 14,
    height: 0,
    font: 'droid sans',
    weight: 'bold',
    style: 'normal',
    anchor: { x: 0.5, y: 0.5, z: 0.0 } });


  THREE.BAS.Utils.separateFaces(geometry);

  return new TextAnimation(geometry);
}

//mathematical details of the animation

function generateTextGeometry(text, params) {
  var geometry = new THREE.TextGeometry(text, params);

  geometry.computeBoundingBox();

  geometry.userData = {};
  geometry.userData.size = {
    width: geometry.boundingBox.max.x - geometry.boundingBox.min.x,
    height: geometry.boundingBox.max.y - geometry.boundingBox.min.y,
    depth: geometry.boundingBox.max.z - geometry.boundingBox.min.z };


  var anchorX = geometry.userData.size.width * -params.anchor.x;
  var anchorY = geometry.userData.size.height * -params.anchor.y;
  var anchorZ = geometry.userData.size.depth * -params.anchor.z;
  var matrix = new THREE.Matrix4().makeTranslation(anchorX, anchorY, anchorZ);

  geometry.applyMatrix(matrix);

  return geometry;
}


////////////////////
// CLASSES
////////////////////

function TextAnimation(textGeometry) {
  var bufferGeometry = new THREE.BAS.ModelBufferGeometry(textGeometry);

  var aAnimation = bufferGeometry.createAttribute('aAnimation', 2);
  var aCentroid = bufferGeometry.createAttribute('aCentroid', 3);
  var aControl0 = bufferGeometry.createAttribute('aControl0', 3);
  var aControl1 = bufferGeometry.createAttribute('aControl1', 3);
  var aEndPosition = bufferGeometry.createAttribute('aEndPosition', 3);

  var faceCount = bufferGeometry.faceCount;
  var i, i2, i3, i4, v;

  var size = textGeometry.userData.size;

  var maxDelayX = 2.0;
  var maxDelayY = 0.25;
  var minDuration = 2;
  var maxDuration = 8;
  var stretch = 0.25;

  this.animationDuration = maxDelayX + maxDelayY + maxDuration - 3;
  this._animationProgress = 0;

  for (i = 0, i2 = 0, i3 = 0, i4 = 0; i < faceCount; i++, i2 += 6, i3 += 9, i4 += 12) {
    var face = textGeometry.faces[i];
    var centroid = THREE.BAS.Utils.computeCentroid(textGeometry, face);

    // animation
    var delayX = Math.max(0, centroid.x / size.width * maxDelayX);
    var delayY = Math.max(0, (1.0 - centroid.y / size.height) * maxDelayY);
    var duration = THREE.Math.randFloat(minDuration, maxDuration);

    for (v = 0; v < 6; v += 2) {
      aAnimation.array[i2 + v] = delayX + delayY + Math.random() * stretch;
      aAnimation.array[i2 + v + 1] = duration;
    }

    // centroid
    for (v = 0; v < 9; v += 3) {
      aCentroid.array[i3 + v] = centroid.x;
      aCentroid.array[i3 + v + 1] = centroid.y;
      aCentroid.array[i3 + v + 2] = centroid.z;
    }

    // ctrl
    var c0x = centroid.x + THREE.Math.randFloat(40, 120);
    var c0y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0);
    var c0z = THREE.Math.randFloatSpread(120);

    var c1x = centroid.x + THREE.Math.randFloat(80, 120) * -1;
    var c1y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0);
    var c1z = THREE.Math.randFloatSpread(120);

    for (v = 0; v < 9; v += 3) {
      aControl0.array[i3 + v] = c0x;
      aControl0.array[i3 + v + 1] = c0y;
      aControl0.array[i3 + v + 2] = c0z;

      aControl1.array[i3 + v] = c1x;
      aControl1.array[i3 + v + 1] = c1y;
      aControl1.array[i3 + v + 2] = c1z;
    }

    // end position
    var x, y, z;

    x = centroid.x + THREE.Math.randFloatSpread(120);
    y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0);
    z = THREE.Math.randFloat(-20, 20);

    for (v = 0; v < 9; v += 3) {
      aEndPosition.array[i3 + v] = x;
      aEndPosition.array[i3 + v + 1] = y;
      aEndPosition.array[i3 + v + 2] = z;
    }
  }

  var material = new THREE.BAS.BasicAnimationMaterial({
    shading: THREE.FlatShading,
    side: THREE.DoubleSide,
    transparent: true,
    uniforms: {
      uTime: { type: 'f', value: 0 } },

    shaderFunctions: [
    THREE.BAS.ShaderChunk['cubic_bezier'],
    THREE.BAS.ShaderChunk['ease_out_cubic']],

    shaderParameters: [
    'uniform float uTime;',
    'attribute vec2 aAnimation;',
    'attribute vec3 aCentroid;',
    'attribute vec3 aControl0;',
    'attribute vec3 aControl1;',
    'attribute vec3 aEndPosition;'],

    shaderVertexInit: [
    'float tDelay = aAnimation.x;',
    'float tDuration = aAnimation.y;',
    'float tTime = clamp(uTime - tDelay, 0.0, tDuration);',
    'float tProgress =  ease(tTime, 0.0, 1.0, tDuration);'
    //'float tProgress = tTime / tDuration;'
    ],
    shaderTransformPosition: [
    'vec3 tPosition = transformed - aCentroid;',
    'tPosition *= 1.0 - tProgress;',
    'tPosition += aCentroid;',
    'tPosition += cubicBezier(tPosition, aControl0, aControl1, aEndPosition, tProgress);',
    'transformed = tPosition;'

    // 'vec3 tPosition = transformed;',
    // 'tPosition *= 1.0 - tProgress;',
    // 'tPosition += cubicBezier(transformed, aControl0, aControl1, aEndPosition, tProgress);',
    // 'tPosition += mix(transformed, aEndPosition, tProgress);',
    // 'transformed = tPosition;'
    ] },

  {
    diffuse: 0xffffff //0000
  });


  THREE.Mesh.call(this, bufferGeometry, material);

  this.frustumCulled = false;
}
TextAnimation.prototype = Object.create(THREE.Mesh.prototype);
TextAnimation.prototype.constructor = TextAnimation;

Object.defineProperty(TextAnimation.prototype, 'animationProgress', {
  get: function () {
    return this._animationProgress;
  },
  set: function (v) {
    this._animationProgress = v;
    this.material.uniforms['uTime'].value = this.animationDuration * v;
  } });


function THREERoot(params) {
  params = utils.extend({
    antialias: false,

    fov: 60,
    zNear: 1,
    zFar: 10000,

    createCameraControls: true },
  params);

  this.renderer = new THREE.WebGLRenderer({
    antialias: params.antialias });

  document.getElementById('three-container').appendChild(this.renderer.domElement);

  this.camera = new THREE.PerspectiveCamera(
  params.fov,
  window.innerWidth / window.innerHeight,
  params.zNear,
  params.zfar);


  this.scene = new THREE.Scene();

  if (params.createCameraControls) {
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
  }

  this.resize = this.resize.bind(this);
  this.tick = this.tick.bind(this);

  this.resize();
  this.tick();

  window.addEventListener('resize', this.resize, false);
}
THREERoot.prototype = {
  tick: function () {
    this.update();
    this.render();
    requestAnimationFrame(this.tick);
  },
  update: function () {
    this.controls && this.controls.update();
  },
  render: function () {
    this.renderer.render(this.scene, this.camera);
  },
  resize: function () {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(window.innerWidth, window.innerHeight);
  } };


////////////////////
// UTILS
////////////////////

var utils = {
  extend: function (dst, src) {
    for (var key in src) {
      dst[key] = src[key];
    }

    return dst;
  },
  randSign: function () {
    return Math.random() > 0.5 ? 1 : -1;
  } };


function createTweenScrubber(tween, seekSpeed) {
  seekSpeed = seekSpeed || 0.001;

  function stop() {
    TweenMax.to(tween, 2, { timeScale: 0 });
  }

  function resume() {
    TweenMax.to(tween, 2, { timeScale: 1 });
  }

  function seek(dx) {
    var progress = tween.progress();
    var p = THREE.Math.clamp(progress + dx * seekSpeed, 0, 1);

    tween.progress(p);
  }

  var _cx = 0;

  // desktop
  var mouseDown = false;
  document.body.style.cursor = 'pointer';

  window.addEventListener('mousedown', function (e) {
    mouseDown = true;
    document.body.style.cursor = 'ew-resize';
    _cx = e.clientX;
    stop();
  });
  window.addEventListener('mouseup', function (e) {
    mouseDown = false;
    document.body.style.cursor = 'pointer';
    resume();
  });
  window.addEventListener('mousemove', function (e) {
    if (mouseDown === true) {
      var cx = e.clientX;
      var dx = cx - _cx;
      _cx = cx;

      seek(dx);
    }
  });
  // mobile
  window.addEventListener('touchstart', function (e) {
    _cx = e.touches[0].clientX;
    stop();
    e.preventDefault();
  });
  window.addEventListener('touchend', function (e) {
    resume();
    e.preventDefault();
  });
  window.addEventListener('touchmove', function (e) {
    var cx = e.touches[0].clientX;
    var dx = cx - _cx;
    _cx = cx;

    seek(dx);
    e.preventDefault();
  });
}
    </script>
</body>
</html>

2. Fly-In Text Animation

Made by Ar Nahid. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
    margin: 0;
    padding: 0;
    background: #0e0e0e;
}
.text{
    text-align: center;
    color: #e7e7e7;
    font-family: sans-serif,helvetica;
    margin-top: 70px;
    font-size: 250%;
    font-weight: 400;
    text-shadow:2px 1px 2px #eee;
}
.fly-in{
    position: absolute;
    left: 50%;
    top: 50%;
    list-style: none;
    transform: translateX(-50%) translateY(-50%);
}
.fly-in li {
    display: inline-block;
    margin-right: 30px;
    font-family: sans-serif,helvetica;
    font-weight: 300;
    font-size: 38px;
    color: #e7e7e7;
    opacity: 1;
    transition: all 2.8s cubic-bezier(0.6, -.005, 0.32, 1.75);
}
.fly-in.hidden li {
    opacity: 0;
}
.fly-in.hidden li:nth-child(1) {
    transform: translateX(150px) translateY(-170px); 
}
.fly-in.hidden li:nth-child(2) {
    transform: translateX(-210px) translateY(170px); 
}
.fly-in.hidden li:nth-child(3) {
    transform: translateX(20px) translateY(-100px); 
}
.fly-in.hidden li:nth-child(4) {
    transform: translateX(-100px) translateY(-20px); 
}
.fly-in.hidden li:nth-child(5) {
    transform: translateX(-70px) translateY(-200px); 
}
.fly-in.hidden li:nth-child(6) {
    transform: translateX(200px) translateY(70px); 
}
.fly-in.hidden li:nth-child(7) {
    transform: translateX(30px) translateY(200px); 
}
.fly-in.hidden li:nth-child(8) {
    transform: translateX(30px) translateY(-100px); 
}
.fly-in.hidden li:nth-child(9) {
    transform: translateX(100px) translateY(-170px); 
}
.fly-in.hidden li:nth-child(10) {
    transform: translateX(50px) translateY(50px); 
}
</style>
</head>
<body>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--
NOTE :- put above JQuery library in starting of 'HEAD' tag.
Thanks to RINKANS !
-->
<h2 class="text">Fly-In-Animation</h2>

<ul class="fly-in hidden">
    <li>F</li>
    <li>L</li>
    <li>Y</li>
    <li>A</li>
    <li>N</li>
    <li>I</li>
    <li>M</li>
    <li>A</li>
    <li>T</li>
    <li>I</li>
    <li>O</li>
    <li>N</li>
</ul>
      <script>
$(window).load(function () {
  setTimeout(function () {
    $('.fly-in').removeClass('hidden');
  }, 700);
});
    </script>
</body>
</html>

3. 300 Followers Text Animation

Made by Caleb Miller. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
<style>
html,
body {
	height: 100%;
}

body {
	background-image: radial-gradient(ellipse at center, #2c0c00 8.0%, #000 100.0%);
	background-size: 160% 160%;
	background-position: 50% 50%;
	overflow: hidden;
}

.text-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: fixed;
	z-index: 1;
	top: 65vh;
	width: 100%;
}

h1 {
	color: rgb(255, 94, 30);
	font-family: 'Luckiest Guy', sans-serif;
	font-size: min(12vw, 64px);
	text-align: center;
	margin-bottom: 40px;
}

a {
	color: rgb(255, 94, 30);
	font-family: system-ui;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid rgb(255, 94, 30);
	opacity: 0.65;
}

a:hover,
a:focus {
	opacity: 1;
}

@media (max-width: 600px) {
	a {
		font-size: 12px;
	}
}

img {
	display: none;
}
</style>
</head>
<body>
  <div class="text-wrap">
	<h1>Followers!</h1>
	<a href="https://codepen.io/MillerTime/full/qBZRpQV" target="_blank">Check out the interactive version here</a>
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAIAAAAt/+nTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACJRJREFUeNrU2EePFEkQBWAGGu+99957EHBBgMQJzlz4k1yRkBAehPfee+897Df1ZnOKnoGdlXYlyEOruioj4sULl1Xduv3hq6XTu927d2+68+3btz/AAbh79OjRq1evnj17umhpaX36/fv3r1+/fv78+dOnTy5+N0/aHIC10Wj0799/yJAhw4cPHzp0aL9+/fjgEdDv3r17/vz506dPX7x48fbt2y9fvvDqpxqrVb/zvVpdBfQvxVsig3K4p0+fPnv27GnTpo0ZM2bAgAFc8hTcN2/ePHjw4Nq1a5cuXfLLk48fP3ZUKoD0JIAlCUUs0fP7i+jBUMTZ7bp4I4bBnTVr1vr161esWDFp0iRx6N27d7QQA/fly5e3bt06efLkgQMHTp8+/fDhw7oPoUAAsTBq1CjicLhpA9vi9ujRI26LHhydem7/oEGDhg0bNmLECBddF2/EPAemTJmydOnSxYsXA1GnMD7QC5lHffv2pYKix48f+404bxPAuXPnzpw5UwD79OkTBB8+fBC9y5cvnz9//urVqx2jJ1GlK5EZM2bMmTMHDKq6Lt6oKyJGVx19MtJfYXXfL+HXr19TJK9klz3Qjx49euHChWvXrkXB5MmTBw8ebGcQ2CN6N2/edH///v1N0aOZxalTpy5btmzVqlXz588fO3asSLKV7G8SP3XqFHFhKT40so+jL6olTJSWugluAeWea8GliJlz585RarP7CIN+w4YNa9asAcUeIqUQ6dES5IZf0aP8xIkTARHncb98+fJNmzYtWbIEenvifJN40pI/BNGX4Lc5IEM4IM9gog4myDQfWpAxulpyrEe1XIypVnhiT+bgHnrJA31Kv77ifGBR+7FaQHgkVtrG6tWrhW7ixInxsKm4I+430dAP379/LwtS020RoPHevXvHjh179erVkydP7t+/zyW6sAvZxo0bEe9vKVZu9KqWDfPmzWM+3Ad95oZfVjNS3IdVfwt09YMjO8eNG6fqBDDcJ/hkk5yJf1o85cTF6u7duxCCR1V7DRAQgcOHD4uvRNL4macOVlvhmzBhQlNX9lTNQJDKYwDQ9A08sUGJ/B45cmS6iqcu7AT34sWLShMybktI3NtJYWYOD589e8aEzEFQJhIfZJFCX7BggZqmP421zYFI3rlzp5waEru4AWgGc/AJn0C5wNn48eMFh6WUnZvY1TEUKxx616JFi7QmbqQHiIM2TQQIOpHKpRQ9uzBIY83aU9okJ3EbBg4cmFZLD5+xqSPpIj90IfKhFlCIR1ZLemzZsoW94OOP+LBx+/ZtiUivCKiQRJ8Gvl24cGHXrl2CyQEa7FepWER/QPBWwvANaNzbYwOjGMXr8ePHd+7ciQJgjCYuMc2HmPCrm7OYsMDTaBraFLEh77dv3y64o6pVGmtsGMYKBtkcoEuXiHvy0NOzZ88eOXLErywXDVygHGeyMWct9QM0N9LB3E/uyVUpgH5pbGimXxPnrW2cTCIRF7FS7o2Ow9k+bWHr1q321U8miQ+n4yfQNhQEyR8OXL9+XXyUQXIUFHdEoxCBICIozARMd7KTwwpUbqhG16y4QBYNqIzDyWfEJQKtM6rTY0naVpKqPvYg0EAlrszBBBrSTEv3SBPLjMsxRgqpV72vTJ/EofvfqySwbIGYuOT8Vi0iFOJCwymVyRz0KcvOI4BjJp15XAi9NOVx3PWrFSgjSSnc7uRkmphEtn7kjlcABUHTMabOTjm01w9tbsaTuqC/jCYR2h0IJeX0t2PHjj179tiE6c2bN2/btk23Saxz7JH6uMcZeuRuazurjpCJSQ6CpYOJVb2P2Rw/43DwZaecRFYZ5Hk5KWlWTpZqI42eYNtplOEUioh7rPhE0+MbN27YatYou7acqzZrKTZLFQ07Y5uNdBg++3WfeJqGItZzPC0ICGaQuci5KIci9SrmV65cETQ6iacZZkokShnD2dAWgSSGIec0Ilm1cG04ZQQl7sHtGEQJak/eclzbiTnGzDUIIHOfJ3OrlQpOHxM0k16u++tClqeTQgm9zdp0cgkXOmmZA5lCebVCa/tRIu8D9q1bt05PVAAmJb1xgEaPSljDwctq0aVF6Dk2pC0Q1zFAFxB6VLyO7LQjN9IrGdaCBdZ5jjayLnCUg4kIOJbiBaGsULty5UpTSChyjsL9vWol7O3vA/DxgXm7Rdz8y2mE1b7VyiGnvGGk1XASWyaXkSlKst9OGihEqiySltDjVX4Tly2SEzt6paeII67JZk5xgJ9Gp2vE26zSnB0SPaa5lHcDDiCivYjTN5FNBUt2C1mZymk+oT8JENZd0CIHzCyNNdlPCVl/JT0E/nIs/GGE515Knenh5r+bVJ05cyZJkoHIc0S4kxpAKyVxXlmer1b9laBR3ldig1gOXkHf1OOANlkUCdogSJsXASTlMIezZDMi0ltzhs1JGPFHjx6FWAAhcB+jRm9ewZEdJZzhQ6Evh2Xo2T106BBzjCZ/WnMkp1byOBNB6Ev3TbNjO52LMd4fPHjQiADFnTRBTzN6ygtdcAd6akbZCT3ZvXv3psCCIMoRAXfaQBlw9bOjnHG+2L17NwdEr1RwmwPlnSatw8IWMRcyVdaa8PxG3r59+4CQBso3RZJRRWMaYhz+VC1/lRqymZQ2XgiJo6D+PpVxm3KymciXamX8pV8x53BlLjkgqv4Q1/xZJR+FBCHvXxIxHyYSfQZEkBuY6PTrQOKuBryUmdMuqBINsihQMBJP1tGQnluXzfGROb2IrPox+1UUSAwJO0HiWIAh86vzL3Pls4zSKYeNHLPS8gmL0s++zyQHuCEPofFLA2OofVYtzCVEHT+rpE9EfFi1UgyCINRk847VqemWTj8wlSwsJ5YY/vV3xdIP8iqYxp+Miu1ff59r+raV+vnHT5ot/8v3yh8P4V3/rthR/Lf9qPyfrb8EGACE/jY6oCFW9wAAAABJRU5ErkJggg==" />
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://npmcdn.com/regl/dist/regl.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js'></script>
      <script>
console.clear();

////////////
// CONFIG //
////////////

// Affects number of cubes generated
const DENSITY = 1;
const LAYERS = 5;
// Colors are in rgb format
const COLORS = [
[1.000, 0.655, 0.231],
[1.000, 0.365, 0.114],
[0.898, 0.078, 0.392],
[0.424, 0.5, 0.114]];

const GAMMA = 1.8;
const CLEAR_COLOR = [0, 0, 0, 0];
// Time in seconds for all cubes to wrap around once.
const SCROLL_TIME = 10;
// Radians per second
const ROTATE_MIN = 0.5;
const ROTATE_MAX = 4.2;
// Meters
const SIZE_MIN = 0.032;
const SIZE_MAX = 0.064;
// Randomize placement (meters)
const OFFSET_JITTER = 0.025;
// Camera controls
const CAMERA_DISTANCE = 3.5;
const CAMERA_FOV = 0.7;
const CAMERA_NEAR = 1;
const CAMERA_FAR = 100;


////////////////////////
// COMPUTED CONSTANTS //
////////////////////////

// Number of cubes on each axis
const COUNT_X = Math.floor(32 * DENSITY);
const COUNT_Y = Math.floor(16 * DENSITY);
const COUNT_Z = Math.floor(LAYERS);
const COUNT_TOTAL = COUNT_X * COUNT_Y * COUNT_Z;
// Bounding volume dimensions (meters)
const BOUND_WIDTH = 2;
const BOUND_HEIGHT = COUNT_Y / COUNT_X * BOUND_WIDTH;
const BOUND_DEPTH = COUNT_Z / COUNT_X * BOUND_WIDTH;


//////////////////
// MATH HELPERS //
//////////////////

const TAU = Math.PI * 2;
const random = (min, max) => Math.random() * (max - min) + min;
const interpolate = (a, b, mix) => (b - a) * mix + a;


/////////////////
// APPLICATION //
/////////////////

const regl = createREGL({ extensions: ['angle_instanced_arrays'] });

const textTexture = regl.texture({
  format: 'rgb',
  data: document.querySelector('img'),
  mag: 'linear',
  min: 'linear' });


const viewMatrix = mat4.fromTranslation([], [0, 0.25, -CAMERA_DISTANCE]);
const projectionMatrix = [];
const projectionViewMatrix = [];

// Gamma correct colors
COLORS.forEach(c => {
  c[0] = Math.pow(c[0], GAMMA);
  c[1] = Math.pow(c[1], GAMMA);
  c[2] = Math.pow(c[2], GAMMA);
});

// Color of each cube
const colors = new Float32Array(3 * COUNT_TOTAL);
// Position of each cube
const offsets = new Float32Array(3 * COUNT_TOTAL);
// Base scale of each cube
const scales = new Float32Array(COUNT_TOTAL);
// Axis of rotation for each cube
const rotationAxes = new Float32Array(3 * COUNT_TOTAL);
// Rotation angle for each cube
const angles = new Float32Array(COUNT_TOTAL);
// Rotation speed for each cube (radians/s)
const rotationSpeeds = new Float32Array(COUNT_TOTAL);

// `angleBuffer` will be updated each frame, to animate rotations
const angleBuffer = regl.buffer({
  data: angles,
  type: 'float',
  usage: 'dynamic' });


// Generate all data.
// Some buffers have a stride of 1, others have a stride of 3.
let i = 0;
let i3 = 0;
for (let x = 0; x < COUNT_X; x++) {if (window.CP.shouldStopExecution(0)) break;
  const xPercent = x / COUNT_X;
  for (let y = 0; y < COUNT_Y; y++) {if (window.CP.shouldStopExecution(1)) break;
    const yPercent = y / COUNT_Y;
    for (let z = 0; z < COUNT_Z; z++) {if (window.CP.shouldStopExecution(2)) break;
      const zPercent = z / COUNT_Z;
      const color = COLORS[Math.random() * COLORS.length | 0];
      const axis = vec3.random([]);
      colors[i3] = color[0];
      colors[i3 + 1] = color[1];
      colors[i3 + 2] = color[2];
      offsets[i3] = xPercent * BOUND_WIDTH - 0.5 * BOUND_WIDTH + random(-OFFSET_JITTER, OFFSET_JITTER);
      offsets[i3 + 1] = yPercent * BOUND_HEIGHT - 0.5 * BOUND_HEIGHT + random(-OFFSET_JITTER, OFFSET_JITTER);
      offsets[i3 + 2] = zPercent * BOUND_DEPTH - 0.5 * BOUND_DEPTH + random(-OFFSET_JITTER, OFFSET_JITTER);
      scales[i] = 0.5 * random(SIZE_MIN, SIZE_MAX);
      rotationAxes[i3] = axis[0];
      rotationAxes[i3 + 1] = axis[1];
      rotationAxes[i3 + 2] = axis[2];
      angles[i] = Math.random() * TAU;
      rotationSpeeds[i] = random(ROTATE_MIN, ROTATE_MAX);
      i++;
      i3 += 3;
    }window.CP.exitedLoop(2);
  }window.CP.exitedLoop(1);
}

// Shader setup, using instancing to draw many copies of one cube.
// Note most animation and math is done in the vertex shader on the GPU,
// including generating rotation matrices. Many common instancing approaches
// upload a tranform matrix for each instance each frame, but here we only
// upload a single float each frame (the angle) and a rotation matrix is built
// from that and a static rotation axis.
window.CP.exitedLoop(0);const draw = regl({
  cull: { enable: true },
  frontFace: 'cw',
  vert: `
		precision highp float;

		attribute vec3 a_position;
		attribute vec3 a_normal;
		attribute vec3 a_color;
		attribute vec3 a_offset;
		attribute float a_scale;
		attribute vec3 a_rotationAxis;
		attribute float a_angle;
		uniform sampler2D u_tex;
		uniform float u_scrollOffset;
		uniform mat4 u_projectionViewMatrix;
		varying vec3 v_color;

		mat4 rotationMatrix(vec3 axis, float angle) {
			float s = sin(angle);
			float c = cos(angle);
			float oc = 1.0 - c;
			return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
									oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
									oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
									0.0,                                0.0,                                0.0,                                1.0);
		}

		void main() {
			vec3 offset = a_offset;
			offset.x = mod(offset.x + u_scrollOffset + 1.0, 2.0) - 1.0;
			vec2 texCoord = vec2(
				(offset.x + 1.0) * 0.5,
				1.0 - (offset.y + 0.5)
			);
			float texScale = texture2D(u_tex, texCoord).r;
			mat4 rotation = rotationMatrix(a_rotationAxis, a_angle);
			vec3 position = (rotation * vec4(a_position, 1.0)).xyz;
			vec3 normal = (rotation * vec4(a_normal, 1.0)).xyz;
			gl_Position = u_projectionViewMatrix * vec4(position * a_scale * texScale + offset, 1.0);
			v_color = a_color * min(1.0, normal.z + 0.1);
		}
	`,
  frag: `
		precision highp float;

		varying vec3 v_color;

		void main() {
			gl_FragColor = vec4(v_color, 1.0);
		}
	`,
  attributes: {
    // unit cube triangle vertices
    a_position: getCubeVertices(),
    a_normal: getCubeNormals(),
    a_color: {
      buffer: regl.buffer(colors),
      divisor: 1 // one per cube
    },
    a_offset: {
      buffer: regl.buffer(offsets),
      divisor: 1 // one per cube
    },
    a_scale: {
      buffer: regl.buffer(scales),
      divisor: 1 // one per cube
    },
    a_rotationAxis: {
      buffer: regl.buffer(rotationAxes),
      divisor: 1 // one per cube
    },
    a_angle: {
      buffer: angleBuffer,
      divisor: 1 // one per cube
    } },

  uniforms: {
    u_tex: textTexture,
    u_scrollOffset: ({ time }) => {
      return time % SCROLL_TIME / SCROLL_TIME * BOUND_WIDTH;
    },
    u_projectionViewMatrix: ({ viewportWidth, viewportHeight }) => {
      const aspectRatio = viewportWidth / viewportHeight;
      let finalFovY = CAMERA_FOV;
      // On narrow screens, widen FOV (zoom out)
      if (aspectRatio < 1) {
        finalFovY = interpolate(CAMERA_FOV / aspectRatio, CAMERA_FOV, 0.5);
        // Prevent FOV from getting too wide and approaching 180 degrees
        finalFovY = Math.min(finalFovY, 0.8 * Math.PI);
      }
      mat4.perspective(projectionMatrix, finalFovY, aspectRatio, CAMERA_NEAR, CAMERA_FAR);
      mat4.multiply(projectionViewMatrix, projectionMatrix, viewMatrix);
      return projectionViewMatrix;
    } },

  count: 36,
  instances: COUNT_TOTAL });


// Animation loop
let lastTime = -1;
regl.frame(({ time }) => {
  const timeDelta = lastTime === -1 ? 0 : time - lastTime;
  lastTime = time;

  regl.clear({ color: CLEAR_COLOR });

  for (let i = 0; i < COUNT_TOTAL; i++) {if (window.CP.shouldStopExecution(3)) break;
    const speed = rotationSpeeds[i];
    let angle = angles[i] + speed * timeDelta;
    if (angle > TAU) {
      angle -= TAU;
    }
    angles[i] = angle;
  }window.CP.exitedLoop(3);

  angleBuffer.subdata(angles);

  draw();
});



//////////////////
// DATA HELPERS //
//////////////////

function getCubeVertices() {
  const ltf = [-1, 1, 1];
  const ltb = [-1, 1, -1];
  const lbf = [-1, -1, 1];
  const lbb = [-1, -1, -1];
  const rtf = [1, 1, 1];
  const rtb = [1, 1, -1];
  const rbf = [1, -1, 1];
  const rbb = [1, -1, -1];
  return [
  // top
  ltf, ltb, rtb,
  rtb, rtf, ltf,
  // bottom
  lbb, lbf, rbf,
  rbf, rbb, lbb,
  // left
  ltb, ltf, lbb,
  lbb, ltf, lbf,
  // right
  rbf, rtf, rtb,
  rtb, rbb, rbf,
  // front
  lbf, ltf, rtf,
  rtf, rbf, lbf,
  // back
  rtb, ltb, lbb,
  lbb, rbb, rtb];

}

function getCubeNormals() {
  const up = [0, 1, 0];
  const down = [0, -1, 0];
  const left = [-1, 0, 0];
  const right = [1, 0, 0];
  const front = [0, 0, 1];
  const back = [0, 0, -1];
  return [
  // top
  up, up, up, up, up, up,
  // bottom
  down, down, down, down, down, down,
  // left
  left, left, left, left, left, left,
  // right
  right, right, right, right, right, right,
  // front
  front, front, front, front, front, front,
  // back
  back, back, back, back, back, back];

}
    </script>
</body>
</html>

4. Text Animation

Made by Miraz Hossain. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {background-color: blue;}
@keyframes textAnim {
  0% {font-size: 80px; fill: white;}
  10% {font-size: 100px; fill: red;}
  40% {font-size: 70px; fill: white;}
  100% {font-size: 80px; fill: white;}
}

@-webkit-keyframes textAnim {
  0% {font-size: 80px; fill: white;}
  10% {font-size: 100px; fill: red;}
  40% {font-size: 70px; fill: orange;}
  100% {font-size: 80px; fill: white;}
}

text tspan{
  font-family: Helvetica, Arial;
  font-weight: 900;
  animation: textAnim 2s ease infinite;
  -webkit-animation: textAnim 2s ease infinite;
}


#l2 {
  animation-delay: .1s;
  -webkit-animation-delay: .1s;
}
#l3 {
  animation-delay: .2s;
  -webkit-animation-delay: .2s;
}
#l4 {
  animation-delay: .3s;
  -webkit-animation-delay: .3s;
}
#l5 {
  animation-delay: .4s;
  -webkit-animation-delay: .4s;
}

#l6 {
  animation-delay: .5s;
  -webkit-animation-delay: .5s;
}

#l7 {
  animation-delay: .6s;
  -webkit-animation-delay: .6s;
}
#l8 {
  animation-delay: .6s;
  -webkit-animation-delay: .6s;
}
#l9 {
  animation-delay: .6s;
  -webkit-animation-delay: .6s;
}
</style>
</head>
<body>
  <svg width="600" height="200">
  <text x="300" y="125" text-anchor="middle">
    <tspan id="l1">A</tspan>
    <tspan id="l2">N</tspan>
    <tspan id="l3">I</tspan>
    <tspan id="l4">M</tspan>
    <tspan id="l5">A</tspan>
    <tspan id="l6">T</tspan>
    <tspan id="l7">I</tspan>
    <tspan id="l8">O</tspan>
    <tspan id="l9">N</tspan>
  </text>
</svg>
      <script>
var spans = document.querySelectorAll("tspan");
var i = 0;
for (i = 0; i < spans.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  spans[i].setAttribute("rotate", 10 * Math.random() - 5);
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

5. Text Animation Concept using Lettering.JS

Made by Brian Gonzalez. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
body {
  background: url(https://subtlepatterns.com/patterns/skin_side_up.png);
}

#text {
  font-family: Yanone Kaffeesatz;
  font-size: 70px;
  font-weight: bold;
  text-align: center;
  color: #e0d497;
  text-transform: uppercase;
  margin-top: 60px;
  text-shadow: 1px 1px 0px white, 1px 3px 1px #39505c;
}
#text .char1 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate1 0.9s infinite 20ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate1 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char2 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate2 0.9s infinite 40ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate2 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char3 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate3 0.9s infinite 60ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate3 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char4 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate4 0.9s infinite 80ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate4 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char5 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate5 0.9s infinite 100ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate5 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char6 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate6 0.9s infinite 120ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate6 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char7 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate7 0.9s infinite 140ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate7 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char8 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate8 0.9s infinite 160ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate8 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char9 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate9 0.9s infinite 180ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate9 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char10 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate10 0.9s infinite 200ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate10 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char11 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate11 0.9s infinite 220ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate11 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char12 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate12 0.9s infinite 240ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate12 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char13 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate13 0.9s infinite 260ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate13 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char14 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate14 0.9s infinite 280ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate14 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char15 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate15 0.9s infinite 300ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate15 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char16 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate16 0.9s infinite 320ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate16 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char17 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate17 0.9s infinite 340ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate17 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char18 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate18 0.9s infinite 360ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate18 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char19 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate19 0.9s infinite 380ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate19 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char20 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate20 0.9s infinite 400ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate20 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char21 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate21 0.9s infinite 420ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate21 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char22 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate22 0.9s infinite 440ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate22 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char23 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate23 0.9s infinite 460ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate23 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char24 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate24 0.9s infinite 480ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate24 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char25 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate25 0.9s infinite 500ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate25 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char26 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate26 0.9s infinite 520ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate26 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char27 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate27 0.9s infinite 540ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate27 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char28 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate28 0.9s infinite 560ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate28 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char29 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate29 0.9s infinite 580ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate29 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char30 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate30 0.9s infinite 600ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate30 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char31 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate31 0.9s infinite 620ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate31 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char32 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate32 0.9s infinite 640ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate32 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char33 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate33 0.9s infinite 660ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate33 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char34 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate34 0.9s infinite 680ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate34 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char35 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate35 0.9s infinite 700ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate35 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char36 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate36 0.9s infinite 720ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate36 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char37 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate37 0.9s infinite 740ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate37 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char38 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate38 0.9s infinite 760ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate38 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char39 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate39 0.9s infinite 780ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate39 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char40 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate40 0.9s infinite 800ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate40 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char41 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate41 0.9s infinite 820ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate41 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char42 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate42 0.9s infinite 840ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate42 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char43 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate43 0.9s infinite 860ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate43 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char44 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate44 0.9s infinite 880ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate44 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
#text .char45 {
  display: inline-block;
  letter-spacing: 10px;
  -webkit-animation: rotate45 0.9s infinite 900ms;
  /* Safari 4+ */
}

@-webkit-keyframes rotate45 {
  0% {
    color: #e0d497;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    color: #3c5f67;
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
</style>
</head>
<body>
  <div id='text'>
  Supercalifragilisticexpialidocious
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgithub.com/davatron5000/Lettering.js/master/jquery.lettering.js'></script>
      <script>
$('#text').lettering();
    </script>
</body>
</html>

6. Text animation w/ anime.js

Made by gift economist. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
/*   background: #2b519e; */
  background: #ffc71f;
  position: relative;
}
article {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translateY(-50%);
}
h1 {
   font-size: 45px;
   text-shadow: 0 1px 0 #e5e6fb, 0 2px 0 #cccef8, 0 3px 0 #b2b5f5, 0 4px 0 #999df2, 0 5px 0 #7f85ef, 0 6px 0 #666cec, 0 3px 0 #4c54e9, 0 1px 0 #333be6, 0 3px 0 #1923e3, 0 5px 0 #000be0;
   padding: 0 2px;
   color: #333be6;
   color: white;
   font-family: helvetica;
   text-align: center;
  @media (max-width: 800px) {
    font-size: 30px;
  }
}

span {
  opacity: 0;
}

.use {
  width: 80px;
  height: 30px;
  display: inline-block;
}

.haptic-on {
  text-shadow: none;
  -webkit-animation: haptic-on 4.5s forwards 1s;
  -moz-animation: haptic-on 4.5s forwards 1s;
  animation: haptic-on 4.5s forwards 1s;
  color: white;
  padding-left: 4px;
}

.haptic-swing {
  -webkit-animation: haptic-swing 1.5s ease-in-out infinite alternate;
  -moz-animation: haptic-swing 1.5s ease-in-out infinite alternate;
  animation: haptic-swing 1.5s ease-in-out infinite alternate;
  color: white;
  padding-left: 4px;
}

@keyframes haptic-on {
  from {
    text-shadow: none;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #666cec, 0 0 20px #cccef8, 0 0 35px #cccef8, 0 0 40px #cccef8, 0 0 50px #cccef8, 0 0 75px #cccef8;
  }
}

@keyframes haptic-swing {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #666cec, 0 0 20px #cccef8, 0 0 35px #cccef8, 0 0 40px #cccef8, 0 0 50px #cccef8, 0 0 75px #cccef8;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #cccef8, 0 0 35px #cccef8, 0 0 40px #cccef8, 0 0 50px #cccef8, 0 0 75px #cccef8;
  }
}
</style>
</head>
<body>
  <article>
  <h1><span>S</span><span>c</span><span>r</span><span>e</span><span>e</span><span>n</span><span>s</span> <span>y</span><span>o</span><span>u</span> <span class="haptic-on">feel</span> <span>&amp;</span> <span>t</span><span>o</span><span>o</span><span>l</span><span>s</span> <span>y</span><span>o</span><span>u</span> <span class="use"></span>   </h1>
</article>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.min.js'></script>
      <script>
$(document).ready(function () {

  anime({
    targets: 'span',
    opacity: {
      value: 1,
      duration: 1000,
      easing: 'easeInOutQuad' },

    transformY: {
      value: '50px',
      duration: 1000,
      easing: 'easeInOutQuad',
      delay: 2900 },

    delay: function (el, index) {
      return index * 25;
    } });


  setTimeout(function () {
    var theLetters = "abcdefghijklmnopqrstuvwxyz#%+=-"; //You can customize what letters it will cycle through
    var ctnt = "use"; // Your text goes here
    var speed = 50; // ms per frame
    var increment = 8; // frames per step. Must be >2


    var clen = ctnt.length;
    var si = 0;
    var stri = 0;
    var block = "";
    var fixed = "";
    //Call self x times, whole function wrapped in setTimeout
    (function rustle(i) {
      setTimeout(function () {
        if (--i) {rustle(i);}
        nextFrame(i);
        si = si + 1;
      }, speed);
    })(clen * increment + 1);
    function nextFrame(pos) {
      for (var i = 0; i < clen - stri; i++) {if (window.CP.shouldStopExecution(0)) break;
        //Random number
        var num = Math.floor(theLetters.length * Math.random());
        //Get random letter
        var letter = theLetters.charAt(num);
        block = block + letter;
      }window.CP.exitedLoop(0);
      if (si == increment - 1) {
        stri++;
      }
      if (si == increment) {
        // Add a letter; 
        // every speed*10 ms
        fixed = fixed + ctnt.charAt(stri - 1);
        si = 0;
      }
      $(".use").html(fixed + block);
      block = "";
    }
  }, 1000);

  setTimeout(function () {
    $('.haptic-on').addClass('haptic-swing');
    $('.haptic-swing').removeClass('haptic-on');
  }, 4000);

});
    </script>
</body>
</html>

7. Left Side Slide Text Animation

Made by JP. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 50px;
  letter-spacing: 1px;
  color: #333;
}
h1 span {
  display: inline-block;
  animation: slideLeft 1.5s forwards;
  opacity: 0;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(200px);
  } 
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}




/* Linkedin href */
a {
  position: fixed;
  bottom: 20px;
  right: 25px;
  transition: 0.2s;
  animation: slideLeft 1.5s forwards;
}

a:after {
  content: "";
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 0%;
  height: 2px;
  background: #333;
  transition: 0.2s;
 }
  
a:hover {
    opacity: 0.8;
}    
a:hover::after {
  width: 100%; 
}
</style>
</head>
<body>
  <div class="container">
    <h1 class="animation">
      Animation
    </h1>
  </div>

<!-- Follow me on linkedin for more animation -->
<a href="https://www.linkedin.com/in/jean-philippe-belley-01558286/" target="_blank"> 
  <svg height="5.42mm" viewBox="0 0 18 16" width="5.54mm" xmlns="http://www.w3.org/2000/svg"><path d="m.65 15.36h3.35v-10.36h-3.35zm1.7-15.36a1.77 1.77 0 0 0 -1.9 1.79 1.76 1.76 0 0 0 1.86 1.79 1.77 1.77 0 0 0 1.9-1.79 1.76 1.76 0 0 0 -1.86-1.79zm13.81 9.42v5.94h-3.37v-5.54c0-1.4-.49-2.35-1.71-2.35a1.83 1.83 0 0 0 -1.72 1.26 2.37 2.37 0 0 0 -.12.84v5.79h-3.36s.04-9.36 0-10.36h3.36v1.46a.05.05 0 0 1 0 0 3.35 3.35 0 0 1 3-1.71c2.26 0 3.92 1.48 3.92 4.67z" fill="#333" fill-rule="evenodd" /></svg>
</a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var spanText = function spanText(text) {
  var string = text.innerText;
  var spaned = '';
  for (var i = 0; i < string.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);else
    spaned += '<span>' + string.substring(i, i + 1) + '</span>';
  }window.CP.exitedLoop(0);
  text.innerHTML = spaned;
};

var headline = document.querySelector("h1");

spanText(headline);

let animations = document.querySelectorAll('.animation');

animations.forEach(animation => {
  let letters = animation.querySelectorAll('span');
  letters.forEach((letter, i) => {
    letter.style.animationDelay = i * 0.1 + 's';
  });
});
    </script>
</body>
</html>

8. Text Animation

Made by Something Strange. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@-webkit-keyframes focus {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(-52%, -50%, 0);
  }
  50% {
    filter: blur(4px);
    transform: translate3d(-49%, -50%, 0);
  }
  80% {
    filter: blur(6px);
    transform: translate3d(-50%, -50%, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(-50%, -50%, 0);
  }
}
@keyframes focus {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(-52%, -50%, 0);
  }
  50% {
    filter: blur(4px);
    transform: translate3d(-49%, -50%, 0);
  }
  80% {
    filter: blur(6px);
    transform: translate3d(-50%, -50%, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(-50%, -50%, 0);
  }
}
@-webkit-keyframes ripple {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ripple {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  color: white;
  font-family: "Abril Fatface", serif;
  font-size: 48px;
  line-height: 1em;
  background-color: black;
}
body:before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 102%;
  height: 102%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191456/s113.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0.33;
  transform: rotate(0deg) translate3d(-50%, -50%, 0);
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  opacity: 0;
}
h1.focus {
  -webkit-animation: focus 1332ms ease-in-out forwards;
          animation: focus 1332ms ease-in-out forwards;
}
h1 span {
  position: relative;
  display: inline-block;
  opacity: 0;
}
h1 span:last-child {
  color: #900;
}
h1 span.show {
  -webkit-animation: ripple 666ms ease-in-out forwards;
          animation: ripple 666ms ease-in-out forwards;
}
</style>
</head>
<body>
  <h1>Slumber Party Massacre 2</h1>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function() {
  $(function() {
    var $title, delay, i, j, new_title, ref, t, title;
    
    // Vars
    $title = $('h1');
    title = $title.text();
    new_title = '';
    delay = 24;
    for (i = j = 0, ref = title.length; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
      t = title[i] === ' ' ? new_title + ' ' : new_title + '<span class="show" style="animation-delay: ' + (i * delay) + 'ms">' + title[i] + '</span>';
      $title.html(t);
      new_title = $title.html();
    }
    return $title.addClass('focus');
  });

}).call(this);

    </script>
</body>
</html>

9. Shattering Text Animation

Made by Arsen Zbidniakov. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  background: #FED75A;
  overflow: hidden;
}

figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

svg {
  padding: 5vw;
  width: 90vw;
}

svg > * {
  fill: #1C1C1C;
  stroke: #1C1C1C;
  stroke-width: 0.85px;
}

/* hover tip */
body:hover:after {
  content: "Hover to Slow Motion";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1vh;
  color: #1C1C1C;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font: 700 9px/14px Tahoma, sans-serif;
  -moz-animation: tip 2.5s forwards;
  -webkit-animation: tip 2.5s forwards;
  animation: tip 2.5s forwards;
}

@-moz-keyframes tip {
  0%, 100% {
    opacity: 0;
  }
  10%, 80% {
    opacity: 1;
  }
}
@-webkit-keyframes tip {
  0%, 100% {
    opacity: 0;
  }
  10%, 80% {
    opacity: 1;
  }
}
@keyframes tip {
  0%, 100% {
    opacity: 0;
  }
  10%, 80% {
    opacity: 1;
  }
}
</style>
</head>
<body>
  <figure>
<svg x="0px" y="0px" viewBox="0 0 883 105.2" xml:space="preserve" overflow="visible">
<polygon points="359.9,49.6 359.8,49.7 359.9,49.8 "/>
<polygon points="28,0 10.8,0 28,9 "/>
<polygon points="28,12.6 0,46 0,51.9 28,48.9 "/>
<polygon points="0.8,105 28,105 28,74.7 20.3,69.7 "/>
<polygon points="28,9 10.8,0 0,0 0,46 28,12.6 "/>
<polygon points="0,51.9 0,57.3 20,69.8 20,69.8 20,69.8 28,74.7 28,48.9 "/>
<polygon points="0,57.3 0,105 0.8,105 20.1,69.7 "/>
<polygon points="89.7,40.6 61,25.9 38,46 38,47.8 91,41.9 "/>
<polygon points="89.7,40.6 68.4,19.4 61,25.9 "/>
<polygon points="99,41 126,37.9 126,30.3 99,0 99,0 "/>
<polygon points="38,47.8 38,48.9 103.1,63.5 98.9,49.8 91,41.9 "/>
<polygon points="68.4,19.3 49.2,0 38,0 38,14.1 61,25.8 "/>
<polygon points="38,48.9 38,80.9 66,98.3 66,55.5 115.2,105 115.8,105 103.1,63.4 "/>
<polygon points="61,25.9 38,14.1 38,46 "/>
<polygon points="38,105 66,105 66,98.3 38,80.9 "/>
<polygon points="126,0 99,0 126,30.3 "/>
<polygon points="99,49.8 102.9,63.5 126,68.7 126,59.4 99,45.3 "/>
<polygon points="99,41 99,45.3 126,59.4 126,37.9 "/>
<polygon points="115.8,105 126,105 126,68.7 102.8,63.4 "/>
<path d="M225.8,74.2l-12.6,24.5c7.5,4.1,16.1,6.5,25.3,6.5c2.2,0,4.3-0.1,6.4-0.4L237,77.7C233,77.5,229.1,76.2,225.8,74.2z"/>
<path d="M213.8,55.7l-20.8,23c4.8,8.4,11.8,15.4,20.3,20.1l12.6-24.5C219.3,70.3,214.7,63.5,213.8,55.7z"/>
<path d="M238.5,77.8c-0.5,0-1,0-1.4,0l7.8,27.1c8.7-1,16.7-4.2,23.6-8.9l-14.6-23.3C249.5,75.8,244.3,77.8,238.5,77.8z"/>
<path d="M251.5,31.3c6.7,4.1,11.3,11.2,11.9,19.4l27.5,1.5c-0.1-12.4-4.6-23.9-12-32.8L251.5,31.3z"/>
<path d="M263.6,52.7c0,8-3.8,15.2-9.8,19.8l14.6,23.3c13.6-9.4,22.6-25.2,22.6-43c0-0.2,0-0.4,0-0.6l-27.5-1.5
	C263.5,51.4,263.6,52,263.6,52.7z"/>
<path d="M227.3,30.3L212.7,7.1c-8.5,4.9-15.6,12.1-20.3,20.8L218.3,38C220.6,34.8,223.7,32.1,227.3,30.3z"/>
<path d="M213.6,52.7c0-5.5,1.8-10.6,4.7-14.7l-25.9-10.2c-4,7.5-6.3,16-6.3,25c0,9.4,2.5,18.2,6.8,25.8l20.8-23
	C213.6,54.7,213.6,53.7,213.6,52.7z"/>
<path d="M238.5,27.7c3.6,0,7,0.8,10.1,2.1l12.5-24.4c-6.8-3.3-14.5-5.1-22.6-5.1c-9.4,0-18.2,2.5-25.8,6.8l14.6,23.3
	C230.7,28.6,234.5,27.7,238.5,27.7z"/>
<path d="M251.5,31.3L279,19.4c-4.9-5.9-11-10.7-17.9-14.1l-12.5,24.4C249.6,30.2,250.6,30.7,251.5,31.3z"/>
<polygon points="387,105 360,50 360,89.1 376.1,105 "/>
<polygon points="387,29.5 360.8,0 360,0 360,49.6 387,30.8 "/>
<polygon points="387,0 360.8,0 387,29.5 "/>
<polygon points="359.9,49.8 359.8,49.7 336.6,65.6 360,89.1 360,50 "/>
<polygon points="336.1,26 335.6,26.1 330.8,59.8 335.6,26.1 308.8,27.1 335.6,26.1 335.6,25.5 310.2,0 299,0 299,8.2 327,61.4 
	327,55.5 336.8,65.6 359.9,49.7 "/>
<polygon points="360,50 360,50 360,50 387,105 387,105 387,30.8 360,49.6 360,49.8 "/>
<polygon points="299,105 326.1,105 310.9,78.9 326.1,105 327,105 327,69.5 299,86.5 "/>
<polygon points="299,52.7 299,86.5 327,69.5 327,65.1 299,36.4 "/>
<polygon points="336.1,26 335.6,25.6 335.6,26.1 "/>
<polygon points="299,8.2 299,36.4 327,65.1 327,61.4 "/>
<polygon points="425,36 425,27.8 399.8,0 397,0 397,49.5 397,49.5 "/>
<polygon points="425,76 397,76 397,105.2 425,80.3 "/>
<polygon points="432.5,63 438.1,40 425,40 425,36 397.4,49.5 425,66.1 425,63 "/>
<polygon points="425,66.1 397,49.5 397,49.5 397,76 425,76 "/>
<polygon points="425,23 444.3,23 437.3,0 399.8,0 425,27.8 "/>
<polygon points="397.4,49.5 397.4,49.5 397.4,49.5 "/>
<polygon points="432.5,63 456.7,63 449.5,40 438.1,40 "/>
<polygon points="463,23 463,0 437.3,0 444.3,23 "/>
<polygon points="458,63 458,40 449.5,40 456.7,63 "/>
<polygon points="463,83 425,83 425,80.3 397.4,105 462,105 420.9,83.8 462,105 463,105 "/>
<path d="M591.6,68.8c8.7-7.1,14.3-17.9,14.3-29.9c0-4.8-0.9-9.3-2.5-13.5l-20.6,13.3L591.6,68.8z"/>
<path d="M582.8,38.6L582.8,38.6C582.7,38.6,582.7,38.6,582.8,38.6L582.8,38.6z"/>
<path d="M567.8,77c0.5,0,1.1,0.4,1.6,0.4L564.8,54h-8.7l-13.9,21l8.8,11.1V77H567.8z"/>
<path d="M556.1,54H551V23h16.6c2.6,0,5.1,0.9,7.3,2.1l12.8-19.2C581.7,2.2,574.7,0,567.2,0h-33.8l27.2,16.7l27-10.7l-27,10.8l0,0
	l0,0l-37.7,15v17.9L542,75L556.1,54z"/>
<path d="M582.7,38.9c0,8.4-6.7,15.1-15.1,15.1h-2.9l4.6,23.5c8.4-0.4,16.1-3.6,22.2-8.6L582.7,38.9L582.7,38.9z"/>
<polygon points="523,103.4 523,105 551,105 551,86.1 542.2,74.8 "/>
<polygon points="523,49.7 523,103.4 542,74.8 "/>
<polygon points="533.4,0 523,0 523,31.8 560.7,16.7 "/>
<path d="M582.7,38.6L582.7,38.6l20.6-13.2c-3-8-8.6-14.8-15.8-19.2l-12.8,19.2C579.6,27.8,582.7,32.8,582.7,38.6z"/>
<polygon points="609,65.6 609,105 615.3,105 628.8,75.8 615.3,105 637,105 637,96.9 619.9,53.5 "/>
<polygon points="620.1,53.5 637,96.9 637,59.8 637,34.4 "/>
<polygon points="637,0 617.8,0 637,21.8 "/>
<polygon points="637,34.4 637,21.8 617.8,0 609,0 609,25.8 619.9,53.5 "/>
<polygon points="609,25.8 609,65.6 619.7,53.5 "/>
<polygon points="686.5,83 674,83 674,63 695.6,63 690.1,40 683.5,40 664.3,83.1 677,105 681.6,105 "/>
<polygon points="647,53.2 647,105 654.5,105 664.4,83.2 "/>
<polygon points="683.5,40 674,40 674,34.9 646.6,53 646.8,53 664.3,83.1 "/>
<polygon points="712,23 712,0 701.3,0 691.2,23 "/>
<polygon points="654.5,105 677,105 664.3,83.1 "/>
<polygon points="674,23 675.1,23 652.4,0 647,0 647,53.2 674,34.9 "/>
<polygon points="686.1,23 680.7,0 652.4,0 675.1,23 "/>
<polygon points="712,105 712,83 700.1,83 705.4,105 "/>
<polygon points="708,63 708,40 690.1,40 695.6,63 "/>
<polygon points="681.6,105 705.4,105 700.1,83 686.5,83 "/>
<polygon points="691.2,23 701.3,0 680.7,0 686.1,23 "/>
<path d="M770.6,77.4c-8,0-14.8-3.3-19.2-8.6l-2.6,31.8c6.4,2.9,13.4,4.6,20.8,4.7l17.5-33.8C783,75.2,777.2,77.4,770.6,77.4z"/>
<path d="M746,53.7l-26.2,12.4c4,15.3,14.8,27.9,29,34.4l2.6-31.8C748.2,64.7,746.2,59.6,746,53.7z"/>
<path d="M787.2,71.4l-17.5,33.8c0.3,0,0.6,0,0.9,0c14.6,0,27.7-6,37.2-15.5l-19.6-19.3C787.9,70.7,787.6,71,787.2,71.4z"/>
<path d="M770.6,28.1c7.1,0,13.3,2.5,17.6,6.9l0,0L777.7,0.7c-2.3-0.3-4.7-0.5-7.1-0.5c-4.8,0-9.4,0.6-13.7,1.8l-2.6,31.8
	C758.5,30.2,764.2,28.1,770.6,28.1z"/>
<path d="M807.6,15.5c-7.9-7.9-18.3-13.2-29.9-14.8l10.6,34.2L807.6,15.5z"/>
<path d="M746,52.7c0-7.4,2.8-13.8,7.5-18.2l-30.3-4.2c-3.2,6.8-5,14.4-5,22.4c0,4.6,0.6,9.1,1.7,13.4L746,53.7
	C746,53.3,746,53,746,52.7z"/>
<path d="M754.3,33.8l2.6-31.8c-14.9,4-27.2,14.5-33.7,28.3l30.3,4.2C753.7,34.3,754,34,754.3,33.8z"/>
<polygon points="845,40 845,39 818,39 818,66.2 848.9,40 "/>
<polygon points="845,63 859.1,63 850.7,40 848.9,40 818,66.2 818,74.6 845,78.3 "/>
<polygon points="845,83 845,78.3 818,74.6 818,105 839.2,105 847.7,83 "/>
<polygon points="879,63 879,40 850.7,40 859.1,63 "/>
<polygon points="839.2,105 865.9,105 880.8,83 847.7,83 "/>
<polygon points="873.2,23 883,23 883,0 860.4,0 860.4,0 "/>
<polygon points="883,105 883,83 880.8,83 865.9,105 "/>
<polygon points="860.4,0.2 860.4,0.2 860.4,0.2 "/>
<polygon points="845,23 873.2,23 860.6,0.2 818,32.2 818,39 845,39 "/>
<polygon points="860.4,0 818,0 818,32.2 860.4,0 "/>
</svg>
</figure>
  <script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var tmax_optionsGlobal = {
  repeat: -1,
  repeatDelay: 0.65,
  yoyo: true };


CSSPlugin.useSVGTransformAttr = true;

var tl = new TimelineMax(tmax_optionsGlobal),
path = 'svg *',
stagger_val = 0.0125,
duration = 0.75;

$.each($(path), function (i, el) {
  tl.set($(this), {
    x: '+=' + getRandom(-500, 500),
    y: '+=' + getRandom(-500, 500),
    rotation: '+=' + getRandom(-720, 720),
    scale: 0,
    opacity: 0 });

});

var stagger_opts_to = {
  x: 0,
  y: 0,
  opacity: 1,
  scale: 1,
  rotation: 0,
  ease: Power4.easeInOut };


tl.staggerTo(path, duration, stagger_opts_to, stagger_val);

var $svg = $('svg');
$svg.hover(
function () {
  tl.timeScale(0.15);
},
function () {
  tl.timeScale(1);
});

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}
    </script>
</body>
</html>

10. Title Text Animation

Made by Robin Treur. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html {
  height: 100%;
}

body {
  font-family: "Fjalla One", sans-serif;
  background: linear-gradient(to bottom, #405166 0%, #656f6f 100%);
}

.container {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: block;
  position: absolute;
  max-width: 225px;
}

.button {
  float: left;
  position: relative;
  bottom: -65px;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  color: #e55643;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
}
.button span {
  transform: skew(-10deg);
  display: block;
  float: left;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
}

h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 42px;
  margin: 0;
  line-height: 47px;
  letter-spacing: 2px;
}

.title {
  transform: translateX(-50%) rotate(-10deg);
  display: block;
  float: left;
  left: 50%;
  position: relative;
}
.title span {
  transform: skew(-10deg);
  display: block;
  float: left;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px, #533d4a 5px 5px, #533d4a 6px 6px;
  min-width: 10px;
  min-height: 10px;
  position: relative;
}

.title:nth-child(1) {
  color: #e55643;
}
.title:nth-child(2) {
  color: #2b9f5e;
}
.title:nth-child(3) {
  color: #f1c83c;
}
</style>
</head>
<body>
  <section class="container">
  <h1>
    <span class="title">This is</span>
    <span class="title">a long</span>
    <span class="title">long title</span>
  </h1>
  
  <div class="button">restart</div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js'></script>
      <script>
$(document).ready(function () {
  $(".title").lettering();
  $(".button").lettering();
});

$(document).ready(function () {
  animation();
}, 1000);

$('.button').click(function () {
  animation();
});


function animation() {
  var title1 = new TimelineMax();
  title1.to(".button", 0, { visibility: 'hidden', opacity: 0 });
  title1.staggerFromTo(".title span", 0.5,
  { ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80 },
  { ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0 }, 0.05);
  title1.to(".button", 0.2, { visibility: 'visible', opacity: 1 });
}
    </script>
</body>
</html>

11. Hand written SVG text animation

Made by Matthew Ellis. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  height: 100vh;
  width: 100%;
  background-color: #35dad2;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

h3 svg {
  width: 20em;
}
</style>
</head>
<body>
  <h3>
  <svg version="1.1" class="subtitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 229.2 69.6" style="enable-background:new 0 0 229.2 69.6;" xml:space="preserve">
											<defs>
												<clipPath id="websiteClip">
													<path d="M79.7,29.1C74.3,36,67.5,43.8,59.3,52.5c-7.1,7-11.8,11.2-13.8,12.6c-4.6,3.5-7.9,5.3-9.8,5.3h-0.4c-2.9,0-4.8-1-5.6-3
													c-0.1-0.5-0.2-0.8-0.2-1v-0.6c0-2.2,1.8-6.5,5.5-12.8l7.8-14.3C31.4,49.5,23.8,57,19.8,60.8c-1.8,0-3.4-0.6-4.8-1.8
													c-0.6-0.7-0.9-1.7-0.9-2.9c0-2.3,1.8-6.5,5.4-12.6c8-14.7,13.4-24.7,16.3-30.1h-0.2c-5.9,0.7-13,4.1-21.1,10c-1.4,0.9-3.4,2.7-6,5.5
													V29c0.5,1.3,1.3,2.2,2.5,2.9c1.5,0.5,3,0.7,4.5,0.7c0.2,0,0.6,0,0.9,0.1c0,0.9-1.6,1.9-4.8,3.1c-1.7,0.5-3.1,0.7-4.2,0.7H6.9
													c-2.5,0-4.2-2.8-4.9-8.4c-0.1-0.3-0.1-0.8-0.1-1.6v-1.1c0-2.5,0.9-4.5,2.8-5.9c1.8-1.7,4.1-3.4,7-5.1c4-2.3,9.3-4.5,15.8-6.6
													c4.8-1.2,8.6-1.8,11.5-1.8c1.5,0.2,2.9,0.8,4,1.8c1.7,1.6,2.6,3.6,2.6,5.9c0,0.3-2.3,4.5-6.9,12.6c-0.8,1.5-4.3,8-10.6,19.4v0.1
													c7.8-7.3,15.2-14.3,22.1-20.9C56,14,59.2,7.7,59.5,6.1c1.4,0.2,2.7,0.7,4,1.7c1.8,1.5,2.7,3.6,2.7,6.2v0.1
													C49.7,44,41.2,59.4,40.8,60.4c1.8-1.6,4.3-4.2,7.7-7.8c9.4-10.6,18.4-22,27.2-34C82,9.8,85.6,3.9,86.4,1c0.1-0.4,0.1-0.8,0.1-1.1
													v-0.1c0.1-0.1,0.1-0.1,0.2-0.1c1.5,0.4,3.1,1.4,4.9,3c1.8,2.3,2.8,4.1,2.8,5.3C91.5,13.2,86.6,20.2,79.7,29.1z M125.8,40
													c-0.7,1.3-1.2,2.3-1.6,3c-0.6,1-1.2,2.3-2,3.8l-2.1,3.7c-1.8,3.2-3.2,5.7-4.1,7.6c-1.5,2.8-4.1,3.4-7.7,2c-1.5-0.6-2.8-1.4-4-2.5
													c-1.2-1.2-2.1-2.3-2.5-3.4l-3.6,6.6c-4.5-0.4-6.3-2.4-5.6-6c-1.1,0.8-2.1,1.5-3,2.1C86,59,83,60.3,80.9,60.6
													c-0.7,0.1-1.3,0.2-1.8,0.2h-0.4c-1.8,0-3.4-0.7-4.7-2c-1.4-1.8-2.1-4.1-2.1-6.6v-0.6c0-3.1,1.1-7,3.2-11.5
													c3.5-7.4,8.1-12.8,13.8-16.2c1-0.6,2-1,3-1.5c0.9-0.4,1.4-0.6,1.6-0.6c0.7,0,1.9,0.2,3.4,0.6c0.7,0.2,1.5,0.4,2.2,0.7
													c2.5,1.2,3.8,3,3.8,5.4v0.4c0,1.6-0.6,3.5-1.9,5.7c-2.3,3.7-5.4,6.8-9.5,9.4l-8.3,0.2c-0.7,0.9-1.2,1.7-1.6,2.4
													c-1.5,2.7-2.3,5-2.6,6.9c0.1,0.3,0.4,0.5,0.9,0.5H80c1.4,0,3.9-0.9,7.6-2.6c2.6-1.2,5.4-2.9,8.3-5.1c0.4-0.3,0.8-0.6,1.2-0.9
													c0.6-1.2,1.1-2,1.4-2.6c0.7-1.4,2.2-4.1,4.5-8.3l0.7-1.4l0.8-1.4l1.6-2.9c1.2-2.3,2.3-4.2,3.2-5.9c5.4-9.8,8-15.1,7.9-15.9
													c2,0.2,3.6,1,4.8,2.6c1.3,1.5,1.8,3.2,1.7,5.2l-11.9,21.5c0.9-0.8,2-1.8,3.3-3l1.7-1.5l1.7-1.6c2.6-2.4,4.6-4.2,6-5.4
													c4.6,0.4,6.4,2.6,5.4,6.6c-0.4,1.5-1.2,3.4-2.4,5.7l-0.8,1.5L125.8,40z M85.4,38.8l4,0.2c0.9-0.3,1.7-0.7,2.4-1.2
													c0.3-0.2,0.8-0.6,1.5-1.3c0.7-0.8,1.2-1.6,1.6-2.4c0.7-1.5,1.1-2.8,1.1-3.9c0-0.7-0.2-1.1-0.6-1.3h-0.2c-0.8,0.1-1.8,0.7-3.1,1.8
													c-1.3,1.2-2.2,2.1-2.9,2.8C87.7,35.4,86.4,37.1,85.4,38.8z M119.9,35.9l-13.6,11.5c-0.3,0.2-0.6,0.4-0.9,0.6l-0.4,0.6
													c0.2,1.7,0.7,3,1.5,4c0.9,1,1.8,1.4,3,1.1L119.9,35.9z M227.8,43.1v0.6c0,1.2-0.4,2.2-1.1,3h-0.1c-0.2-0.7-0.6-1.3-1.2-1.8
													c-0.7-0.3-1.3-0.5-1.8-0.5H223c-3.2,0-9.8,2.8-19.8,8.5c-9,5.2-14.8,7.8-17.3,7.8h-0.3c-3.4,0-5.6-1.9-6.7-5.6
													c-0.2-1.1-0.4-2.2-0.4-3.1v-0.5c0-1.4,0.2-3,0.6-4.6c-4.3,3.9-9,8.2-14.3,13c-0.6,0.6-0.9,0.8-0.9,0.8c-1.7,0-3.1-0.5-4.4-1.5
													c-0.7-0.8-1.1-1.7-1.1-2.6v-0.6c0-1.7,1.3-5,4-9.8c-4.1,3.8-8.2,7.5-12.4,11.2c-2.3,2.2-3.6,3.3-3.7,3.3c-1.3,0-2.6-0.4-4-1.1
													c-1.2-0.8-1.8-1.9-1.8-3.2v-0.4c0-2.2,1.5-5.8,4.4-10.9c0.7-1.2,1.4-2.5,2.2-3.9c-2.6,1.1-4.9,2.2-7,3.3c0.3,1.7,0.5,3.2,0.5,4.7
													v0.3c0,3.4-0.9,6.4-2.7,8.9c-1.5,1.6-3.2,2.4-5.3,2.4h-0.4c-1.9,0-3.7-0.7-5.3-2.2c-0.8-0.9-1.4-1.8-1.7-2.6
													c-0.3-0.9-0.5-1.8-0.5-2.5v-0.4c0-0.9,0.2-1.9,0.6-3c0-0.1,0.1-0.2,0.3-0.4c2.5-2,5-3.8,7.5-5.4c-2-3.7-3-6-3-6.9c0-0.2,0-0.6,0-1.1
													c0-3,1.6-6.3,4.8-9.8c1.6-1.6,2.8-2.7,3.7-3.2c1.7-1.3,3.6-2.5,5.6-3.5c1.1-0.6,2.1-1.1,2.9-1.4c1.7,0.6,3.3,1.9,4.6,4
													c0.4,0.6,0.7,1.3,1,2.1l0.2,0.4c-2.8,0.9-5,1.8-6.8,2.9c-4.9,2.8-7.4,6.2-7.4,10.2c0,0.9,0.1,1.8,0.4,2.8c4.9-2.9,8.8-4.9,11.6-6
													c0.8-1.5,1.7-3,2.7-4.7c1.6-3,2.4-4.9,2.5-5.9h0.1c1.2,0.1,2.5,0.6,3.7,1.5c1,0.9,1.6,1.6,1.8,2c0.7,1.3,1.1,2.5,1.1,3.7l-0.1,0.3
													v0.4c-0.2,0.4-1.6,2.9-4.2,7.5l-5.2,9.1l12.1-11.1c0.7-0.4,1.4-0.6,1.8-0.6h0.4l9-16.4h-0.1c-2.4,0-4.5,0.1-6.4,0.2
													c-0.4-0.2-0.7-0.5-0.9-0.9c-1,1.1-2.2,2.2-3.4,3.5c-2.1-0.3-3.9-0.7-5.4-1.2c-0.5-0.2-1-0.4-1.6-0.6v-0.1c2.3-5.4,3.6-8.5,4-9.3
													c1.5-0.2,2.9-0.3,4.2-0.3h1.2c2.7,0,5.3,0.3,7.8,0.8v0.1c-0.4,0.4-2.1,2.1-4.9,5.1l7.3-0.8c3-5.5,4.5-8.6,4.5-9.3
													c1.2,0,2.5,0.6,4.1,1.8c1.5,1.5,2.3,3.3,2.3,5.4c0,0.4-0.2,1-0.6,1.6c1.2-0.1,2-0.1,2.6-0.1h2.8c0.1,0,0.1,0.1,0.1,0.2
													c-1.2,2.8-1.9,4.3-1.9,4.3h-0.1c-1.7-0.1-3.5-0.2-5.6-0.4l-16,28.7h0.1c7.9-7.4,12-11.1,12.1-11.2c0,0,0,0,0.1,0
													c0.7-1.4,1.6-2.9,2.5-4.4c1.1-1.6,2.6-3.4,4.5-5.4c2.2-2.2,4-3.6,5.4-4.3c1.4-0.9,3-1.8,4.9-2.5c0.2-0.1,0.3-0.1,0.4-0.1
													c1.8,0,3.8,0.5,5.9,1.4c2.5,1.2,3.7,3,3.7,5.5c0,3.2-2,6.9-6,11.2c-2.3,2.2-4.2,3.6-5.5,4.3c-0.4,0.1-0.7,0.1-0.7,0.1
													c-1.2,0-3.8,0-7.8,0.1c-2.1,2.8-3.5,6-4.2,9.4c0,0.3,0.6,0.6,1.7,0.7c0,0.1,0.2,0.1,0.7,0.1h0.5c0.1,0,0.1,0,0.2,0
													c3.1,0,7.8-2.7,13.8-8.1c5.1-4.6,8.7-7.5,10.9-8.8c2-1.1,3.7-1.7,5.1-1.7c4.1,0,7,1.7,8.6,5C227.7,41.5,227.8,42.4,227.8,43.1z
														M192.3,38.5c0.4,0,1.7,0,4.1,0.1c1.1-0.2,2.2-0.9,3.4-2c2.1-2.3,3.1-4.6,3.1-6.9c-0.1-0.8-0.3-1.2-0.7-1.2
													C199.4,29.3,196.1,32.7,192.3,38.5z M134.8,47.9c-0.7,0.5-1.6,1.3-2.7,2.3c-0.6,0.6-1,1.2-1.4,1.8c1.5-0.4,2.6-1,3.4-1.8
													c0.4-0.5,0.6-1,0.6-1.7V47.9z"/>
												</clipPath>
											</defs>
											<path class="path" clip-path="url(#websiteClip)" d="M18.5,33.91S0,36.67,6.67,24.17c8-8.34,22.15-15.46,31.31-13.62,8.34,1-.95,9.34-8.81,24.5C23.34,46.29,15.08,55.23,18.5,57c1.67.86,12-8.3,21.33-20C49.55,24.8,58.23,9.57,61.17,9.5,67.83,9.33,49.88,35.43,40.83,52c-4.14,7.59-10.66,14.17-6.66,15.5C38,68.77,49.17,64,83,15.67c1.59-2.27,7-10.49,8.6-13" fill="none" stroke="#FFFFFF" stroke-width="15"/>
											<path class="path" clip-path="url(#websiteClip)" d="M85.4,41.5s18.1-5.6,13.35-15.75c-2.89-6.18-9,.9-15.5,8.2,0,0-25.5,39.2,14.25,16,0,0,24.37-22.26,28.5-21.05,1.62,1.09-4.14,11-8,19-2.71,5.63-3,10.83-5.55,9.39-24,.28,15.13-45.9,9.21-48.09S94.4,63,94.4,63" fill="none" stroke="#FFFFFF" stroke-width="9"/>
											<path class="path" clip-path="url(#websiteClip)" d="M150.24,20.5S138,26.75,136,31.75s-4.07,5,.43,13.1a9.25,9.25,0,0,1-.18,7.15c-1.75,3.5-2,9.75-7.75,5.75S134.24,42,150.24,37.5c0,0,4.41-4.3,8.51-8.6s-17.5,26-15.88,31.9L173.5,35.19,186.15,9.13s-28,50.42-25.1,51S178.75,38,195.5,41c0,0,20.9-14.33,5-15.75,0,0-26.5,15.25-17,31.25,0,0,8.5,3,18-4.5s22.5-21.2,24.75-4.1" fill="none" stroke="#FFFFFF" stroke-width="10"/>
											<path class="path" clip-path="url(#websiteClip)" d="M171,9.13s-11.33,10.38-8,11.92,43-2.8,43-2.8" fill="none" stroke="#FFFFFF" stroke-width="13"/>
										</svg>
</h3>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js'></script>
      <script>
const svgPath = document.querySelectorAll('.path');

const svgText = anime({
  targets: svgPath,
  loop: true,
  direction: 'alternate',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 700,
  delay: (el, i) => {return i * 500;} });
    </script>
</body>
</html>

12. Text animation.

Made by Subhash. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.heading{
  letter-spacing: 1rem;
  font-family: fantasy;
  color: blue;
}

span{
  display: inline-block;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.4s ease-in-out
}

.fade{
 opacity: 1;
 transform: translateY(0);
}
</style>
</head>
<body>
  <head></head>
<div class="container">
<h1 class="heading">Hello World!!</h1>
</div>
      <script>
const heading = document.querySelector('.heading');
const characters = heading.textContent.match(/[\w\W]/g); //Get the texts and create an array.
heading.textContent = ''; //Empty the contents.

// Loop through each character and push it inside heading element as a new span element.
characters.forEach(char => {
  const span = document.createElement('span');
  span.textContent = char;
  heading.appendChild(span);
});

// Create charcter count variable and set timer with new function called setChar().
let char = 0;
let timer = setInterval(setChar, 100);

//Stop the interval when all characters are rendered else set character span class to fade.
function setChar() {
  const spanChar = document.querySelectorAll('span')[char];
  spanChar.className = 'fade';
  char++;
  char === characters.length && clearInterval(timer);
}
    </script>
</body>
</html>

13. Text Animation?

Made by Short. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
*,
*:before,
*:after {
  box-sizing: border-box;
  font-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #222;
  font-family: Josefin Sans, Helvetica, Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
}
.stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  position: relative;
  color: #fff;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  padding-top: 0.65rem;
  padding-left: 0.5rem;
  padding-right: 0.36rem;
  padding-bottom: 0.2rem;
}
.slash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  transform-origin: center center;
  width: 0.15rem;
  height: 145%;
  background: #fff;
  z-index: 4;
  -webkit-animation: slash 6s ease-in infinite;
          animation: slash 6s ease-in infinite;
}
.slash:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.75rem;
  height: 120%;
  background: #232323;
  z-index: -1;
}
.slash:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.sides {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.sides .side {
  position: absolute;
  background: #fff;
}
.sides .side:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.15rem;
  transform: translateX(-101%);
  -webkit-animation: side-top ease 6s infinite;
          animation: side-top ease 6s infinite;
}
.sides .side:nth-child(2) {
  top: 0;
  right: 0;
  width: 0.15rem;
  height: 100%;
  transform: translateY(-101%);
  -webkit-animation: side-right ease 6s infinite;
          animation: side-right ease 6s infinite;
}
.sides .side:nth-child(3) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.15rem;
  transform: translateX(101%);
  -webkit-animation: side-bottom ease 6s infinite;
          animation: side-bottom ease 6s infinite;
}
.sides .side:nth-child(4) {
  top: 0;
  left: 0;
  width: 0.15rem;
  height: 100%;
  transform: translateY(101%);
  -webkit-animation: side-left ease 6s infinite;
          animation: side-left ease 6s infinite;
}
.text {
  position: relative;
}
.text--backing {
  opacity: 0;
}
.text--left {
  position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 100%;
  overflow: hidden;
}
.text--left .inner {
  transform: translateX(100%);
  -webkit-animation: text-left 6s ease-in-out infinite;
          animation: text-left 6s ease-in-out infinite;
}
.text--right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.text--right .inner {
  transform: translateX(-200%);
  -webkit-animation: text-right 6s ease-in-out infinite;
          animation: text-right 6s ease-in-out infinite;
}
@-webkit-keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@-webkit-keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@-webkit-keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@-webkit-keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@-webkit-keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@-webkit-keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@-webkit-keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
@keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
</style>
</head>
<body>
  <div class="stage">
  <div class="wrapper">
    <div class="slash"></div>
    <div class="sides">
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
    <div class="text">
      <div class="text--backing">Hello</div>
      <div class="text--left">
        <div class="inner">Hello</div>
      </div>
      <div class="text--right">
        <div class="inner">Hello</div>
      </div>
    </div>
  </div>
</div>
      <script>
const curry = f => (...args) =>
args.length >= f.length ?
f(...args) :
curry(f.bind(f, ...args));

const compose = (f, g) => x => f(g(x));
const composeN = (...fns) => (...args) =>
fns.reverse().
reduce((x, f) => f.apply(f, [].concat(x)), args);
    </script>
</body>
</html>