loading screen intro and outro

by James Connolly

HTML

<div id="loadscreen" class="loadscreen load-in-hero">
		<span>

			<svg width="500px" viewBox="0 0 215 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
				<defs>
					<polygon id="path-1" points="0.0362748238 0.000127527101 214.446681 0.000127527101 214.446681 29.7450124 0.0362748238 29.7450124"></polygon>
				</defs>
				<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<g id="Footer" transform="translate(-177.000000, -101.000000)">
						<g id="Logo">
							<g transform="translate(177.000000, 101.000000)">
								<g id="Letters">
									

									<path d="M89.764146,14.4805486 C88.0399303,14.4805486 80.7937678,14.4805486 78.3035017,14.4805486 C77.7319751,14.4805486 77.85423,13.8941977 77.85423,13.8941977 C77.85423,13.8941977 78.136681,12.9445837 78.2288238,12.6409696 C78.31916,12.3361626 78.7232636,12.0456714 79.0695521,12.0456714 C79.4128294,12.0456714 96.2846082,12.0456714 96.2846082,12.0456714 L97.7402244,7.17412753 C97.7402244,7.17412753 80.0397622,7.17412753 78.4630956,7.17412753 C75.1043981,7.17412753 73.0760507,8.76139068 72.5719751,10.4464784 C72.314216,11.3090047 71.2777594,14.7787942 70.9170171,15.9872854 C70.4273953,17.6222679 71.7426894,19.3514959 76.0185998,19.3514959 C77.6470591,19.3514959 84.8564849,19.3514959 87.1160928,19.3514959 C87.5430815,19.3514959 87.7038799,19.6384082 87.6243841,19.9050398 C87.5460928,20.1710749 87.3533757,20.8170749 87.261835,21.1212854 C87.1702944,21.4260924 86.7728154,21.7863731 86.4656726,21.7863731 C86.1585297,21.7863731 69.1843701,21.7863731 69.1843701,21.7863731 L67.7281516,26.6573205 C67.7281516,26.6573205 84.4252804,26.6573205 86.404244,26.6573205 C90.0688799,26.6573205 92.4489359,24.651917 93.0951404,22.7759521 C93.3715689,21.9772503 94.279146,18.7609696 94.5621992,17.8113556 C94.8458547,16.8623381 93.8876894,14.4805486 89.764146,14.4805486" class="spider-letter spider-s" id="Fill-1"...

SCSS

body {
  font-family: arial;
  position: relative;
}

.loadscreen {
  width: 0;
  height: 100%;
  background: #FECC00;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  visibility: visible;
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;

  span {
    display: block;
    width: calc(100% - 30px);
    max-width: 500px;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  svg {
    width: 100%;
  }
  
  //apply animations
  &.load-out,
  &.load-in {
    opacity: 1;
    animation-duration: 0.5s;
    
    svg {
      opacity: 0;
    }
  }
  
  &.load-out{
    width: 100%;
    animation-name: load-out_simple;
  }
  
  &.load-in{
    left: auto;
    right: 0;
    animation-name: load-in_simple;
  }
  
  &.load-in-hero {
    animation-name: load-in_fade;
    animation-duration: 1.75s;
    
    svg {
      animation-name: load-in_logo-zoom;
      animation-duration: 1.75s;
      animation-delay: 0.8s;
    }
    
    #Mark, .spider-letter {
      opacity: 0;
      animation-name: load-in_logo-slide;
      animation-duration: 5s;
    }
    
    .spider-s {
      animation-delay: 0.1s
    }
    .spider-p {
      animation-delay: 0.15s
    }
    .spider-i {
      animation-delay: 0.2s
    }
    .spider-d {
      animation-delay: 0.25s
    }
    .spider-e {
      animation-delay: 0.3s
    }
    .spider-r {
      animation-delay: 0.35s
    }
  }

}

// animations
@keyframes load-out_simple {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes load-in_simple {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@keyframes load-in_logo-slide {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes load-in_logo-zoom {

  0% {
    opacity: 1;
    transform: scale(1);
  }
  10% {
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
   ...

JavaScript

// triggering page transition
$('.page-transition, .page-transition-nav a').click(function() {
  $('.loadscreen').removeClass('load-in');
  $('.loadscreen').removeClass('load-in-hero');
  $('.loadscreen').addClass('load-out');
});

// adding transition trigger class t