ToekanTickets logo - anim

by PhilQ

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="logo_anim">
<span data-c="T">T</span><span data-c="o">o</span><span data-c="e">e</span><span data-c="k">k</span><span data-c="a">a</span><span data-c="n">n</span><span data-c="T">T</span><span data-c="i">i</span><span data-c="c">c</span><span data-c="k">k</span><span data-c="e">e</span><span data-c="t">t</span><span data-c="s">s</span><canvas></canvas>
</div>

CSS

*,:before,:after{margin:0;padding:0;box-sizing:border-box;}

html, body { width: 100%; height: 100%; background-color: #0273D4; }

#logo_anim {
  position: fixed;
  display: inline-block;
  left: 0px;
  width: 100%;
  height: auto;
  top: 50%;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translateY(-50%) scale(0.7);
  transition: all 0.8s cubic-bezier(0.73, 0.00, 0.68, 1.8);
  background-color: #0273D4;
  text-align: center;
  pointer-events: none;
}
#logo_anim.on{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
#logo_anim span {
  position: relative;
  font-family: Wellfleet;
  font-size: 4em;
  color: transparent;
}
#logo_anim span:first-child{
  margin-right: -0.05em;
}
#logo_anim span:after{
  z-index: 2;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: #fff;
  content: attr( data-c );
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  transform: translateX(-50%) translateY(-50%) scale(1);
  transition: all 0.35s ease-in;
  opacity: 0.5;
}

#logo_anim span.on:after {
  transition: all 0.2s ease-out;
  transform: translateX(-50%) translateY(-50%) scale(1.3);
  opacity: 1;
}
#logo_anim span.done:after {
  opacity: 1;
}


#logo_anim.done span:after {
  opacity: 1;
  transition: all 0.45s ease;
}


#logo_anim canvas{
  margin-left: -0.3em;
  vertical-align: middle;
  opacity: 0;
  transition: all 0.15s ease 0.3s;
}

#logo_anim.done canvas{
  opacity: 1;
}

JavaScript

var logo_interval,
	l = 0,
	lt = 2,
  cnv,
  ctx;
  
$(document).ready(function(){
	lt += ($("#logo_anim span").length);
  
  cnv = $('#logo_anim canvas').get(0);
  ctx = cnv.getContext('2d');
  
  var h = $('body').height();
  var lw = 10;
  ctx.font = 'bold 42px Montserrat';
  
  var tw = ctx.measureText('.nl').width;
  cnv.width = tw + (1*lw);
  cnv.height = h;
  ctx.font = 'bold 42px Montserrat';
  ctx.strokeStyle = '#0273D4';
  //ctx.strokeStyle = '#ff0000';
  ctx.lineWidth = lw;
  ctx.fillStyle = '#80bae8';
 
  ctx.strokeText('.nl', (lw/2), (h/2)+0.4*lw );
  ctx.fillText('.nl', (lw/2), (h/2)+0.4*lw );
    
	setTimeout(function(){
  	$("#logo_anim").addClass('on');
   	setTimeout(function(){
			logo_interval = setInterval(function(){
    		l++;
      	if (l<=lt) {
          $("#logo_anim span:nth-child(" + l + ")").addClass('on');
					$("#logo_anim span:nth-child(" + (l-2) + ")").toggleClass('on done');
      	} else {
        	setTimeout(function(){
          	$("#logo_anim").addClass('done');
          }, 100);
        	clearInterval( logo_interval );
        }
      }, 50);
		}, 950);
  }, 500);
  
});