Preloader - Fill effect

index.html

<div class="layer layer--initial">
    <div class="stage-in">
        <div class="stage-in__text slogan">
            <div class="slogan-load-wrap">
                <div class="elem-wrap">
                    <p class="slogan__simple slogan__elem">budi</p>
                </div>
                <div class="elem-wrap">
                    <p class="slogan__emph slogan__elem">dio&nbsp;koji</p>
                </div>
                <div class="elem-wrap">
                    <p class="slogan__simple slogan__elem">____nedostaje</p>
                </div>
            </div>
            <div class="slogan-wrap">
                <p class="slogan__simple slogan__elem">budi</p>
                <p class="slogan__emph slogan__elem">dio&nbsp;koji</p>
                <p class="slogan__simple slogan__elem">____nedostaje</p>
            </div>
        </div>
    </div>
</div>
<div class="content">
   <div class="layer--bg"></div>
    <div class="wrapper">
      <div class="header">
        <h1 class="header__title">
        NEW 
       </h1>
        <h1 class="header__title">
        MEXICO
       </h1>
        <p class="header__desc">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet
        </p>
      </div>
    </div>
</div>
<div class="credits">
  <p>As seen on <a href="http://www.budidiokojinedostaje.hr" target="_blank">Budi dio koji nedostaje</a></p>
</div>

Preloader - Fill effect.markdown

Preloader - Fill effect

Preloader with fill effect (in depth letters). As seen on budidiokojinedostaje.hr

A Pen by Mario Novoselec on CodePen.

License.

script.js

/**
  Preloader function
  **returns new timeline instance
**/
function animateStageIn() {
        var $lInitial = $(".layer--initial"),
            sloganElem = $lInitial.find(".elem-wrap"),
            tl = new TimelineLite({
                paused: true
            });
        tl.add("start")
            .staggerTo(sloganElem, 1.5, {
                width: "100%",
                ease: Power4.easeOut
            }, 0.35, "+=0.3")
            .to($lInitial, 1.3, {
                x: "100%",
                autoAlpha: 0,
                ease: Power4.easeInOut
            });
        return tl;
}
/**
  Content animation
**/
function animateContent(){
  var stageIn=animateStageIn();
    stageIn.to(".header__title",1,{
      x:"0%",
      autoAlpha:1,
      ease:Power4.easeOut
  },"-=0.9")
    .to(".header__desc",1,{
      x:"0%",
      autoAlpha:1,
      ease:Power4.easeOut
  },"-=0.8")
  .fromTo($(".layer--bg"),2.4,{
      scale:"1",
      opacity:0
  },{
    scale:"1.2",
    opacity:0.4,
    ease:Power4.easeOut
  },"-=1.2")
  stageIn.play();
}
animateContent();

scripts

<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.2/TweenMax.min.js"></script>

style.scss

/**GLOBALS - FONTS and COLORS**/
@import url(https://fonts.googleapis.com/css?family=Lato:700,300);
$b-blue: #1E2F75;
$b-red: #d8373f;
/**MIXINS**/
@mixin font-size($psd-font-size, $psd-line-height: $psd-font-size) {
    font-size: $psd-font-size;
    line-height: ($psd-line-height)/$psd-font-size;
}
@mixin letter-spacing($letterspacing) {
    letter-spacing: $letterspacing/1000;
}
@mixin breakpoint($class: custom, $maxmin: max-width, $size: 0) {
    @media ($maxmin: $size) {
         @content;
     }
}
/**PRELOADER**/
.layer--initial{
    position: fixed;
    width:100%;
    height:100vh;
    background: $b-blue;
    z-index:10;
    .slogan{
        position: relative;
        margin:auto;
        left:0;
        right:0;
        top:50%;
        transform: translateY(-50%);
        width: 340px;
      font-family: 'Lato', sans-serif;
      font-weight:700;
      &__simple{
        @include font-size(3.2em,3.6em);
     }
    &__emph{
        @include font-size(5em,5.5em);
        @include letter-spacing(-40em);
        text-transform: uppercase;
      @include breakpoint(fontMin,max-width,1430px){
         @include font-size(4em,4.5em);
      }
   
    }
  }
  .stage-in{
        width:100%;
        height:100%;
    }
  /**
    Letter underlayer. Text that is initially visible
  **/
    .slogan-wrap{
        z-index: 1;
        .slogan__elem{
            color: darken($b-blue,20%);
            opacity: .3;
          &:first-of-type{
            position:relative;
            top:10px;
          }
          &:last-of-type{
            position:relative;
            top:-10px;
          }
        }
    }
    .slogan-load-wrap{
        position: absolute;
        top:0;
        left:0;
        z-index: 10;
        .elem-wrap{
            width:0;
            overflow:hidden;
          &:first-of-type{
            position:relative;
            top:10px;
          }
          &:last-of-type{
            position:relative;
            top:-10px;
          }
        }
        .slogan__elem{
            color:white;
            opacity:1;
        }
    }
}
.content{
   width:100%;
    height:100vh;
  background:$b-blue;
  position:relative;
  overflow:hidden;
  .layer--bg{
        background: url("http://i.imgur.com/Ya8X0Al.jpg?1");
    opacity:0.4;
  background-size:cover;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  .wrapper{
    padding:10%;
    height:100%;
  }
  .header{
    &__desc{
      @include font-size(1.1em,1.8em);
      @include breakpoint(fontMin,max-width,1430px){
         @include font-size(1em,1.6em);
      }
      width:60%;
      color:white;
      font-family:"Lato", sans-serif;
      font-weight:300;
      margin-top:50px;
       transform:translateX(-60%);
      opacity:0;
      @include breakpoint(fontMin,max-width,1430px){
         width:70%;
      }
    }
    &__title{
      @include font-size(12em,11.5em);
      @include breakpoint(fontMin,max-width,1430px){
         @include font-size(8em,7.5em);
      }
      color:$b-red;
      opacity:0;
      font-family: 'Lato', sans-serif;
      font-weight:700;
      transform:translateX(-50%);
    }
  }
}
.credits{
  position:absolute;
  bottom:3%;
  right:5%;
  z-index:400;
  color:white;
  font-family:"Lato", sans-serif;
  font-weight:300;
  font-size:12px;
  a{
    font-weight:700;
    color:white;
  }
}