Animated SVG text mask | Greensock

animated-svg-text-mask-greensock.markdown

Animated SVG text mask | Greensock

because awesome

A Pen by Arden on CodePen.

License.

index.html

<div class='siteWrap'>
  <div class='textMask'>
    <svg id="svg" class='textMask__svg'>
      <defs>
        <mask class='textMask__mask' id='mask' x='0' y='0' width='100%' height='100%'>
          <rect class='textMask__alpha' id="alpha" x="0" y="0" width="100%" height="100%"/>        
          <text class='textMask__title will-animate' id="title" x="50%" y="50%" dy=".3em"  text-anchor="middle">LX Bridge</text>  
        </mask>
      </defs>
      <rect class='textMask__base' id="base" x="0" y="0" width="100%" height="100%"/>
    </svg>
  </div>
  <h1 id='siteTitle' class='siteTitle will-animate'>LX Bridge</h1>
  <button id='replay'>
  Replay</button>
  <div id="background" class='bgImage' style='background-image:url(https://c1.staticflickr.com/9/8682/15309989834_cb5df23871_h.jpg);'></div>
</div>

script.js

var Intro = function() {
  
  var 
    textMaskAlpha,
    textMaskTitle,
    background,
    body,
    tl,
    svg,
    title,
    replay;
  
  var _init = function() {
    svg           = document.getElementById('svg');
    textMaskAlpha = document.getElementById('alpha');
    textMaskTitle = document.getElementById('title');
    background    = document.getElementById('background');
    body          = document.getElementsByTagName('body')[0];
    tl            = new TimelineLite({delay:1});
    title         = document.getElementById('siteTitle');
    replay         = document.getElementById('replay');
    
    _setVisible();
    _animateHero(); 
    _addEventHandlers();
  }
  
  var _addEventHandlers = function() {
    replay.addEventListener('click', _play, false);
  }
  
  var _setVisible = function() {
    TweenLite.set(".will-animate", {visibility: 'visible'});
  }
  
  var _animateHero = function() {   
    tl
      .to(svg, 0.6, { opacity: 0, scale: 1.5, transformOrigin: '50% 50%', ease:Power1.easeOut})
      .from(title, 0.6, { scale: 0.5, opacity: 0, transformOrigin: '50% 50%', ease:Back.easeOut}, 0);   
  }
  
  var _play = function() {
    tl.restart({delay:0.3});
  }
  
  return {
    init: _init
  }
}();

Intro.init();

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

style.scss

@import 'breakpoint';

$desktop: 960px;

* {
  box-sizing: border-box;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,900italic,300);

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  padding: 1em;
  font-family: 'industry', sans-serif;
  background-color: #fff;
  
  @include breakpoint($desktop) {
    padding: 2em;
  }
}

.siteWrap {
  width: 100%;
  height: 100%;
  position:relative;
}

.will-animate {
  visibility: hidden;
}

.textMask {
  
  & {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  &__svg {
    width: 100%;
    height: 100%;
    position: relative;    
  }
  
  &__textWrap {
    /* text-anchor: middle; */
  }
  
  &__title {
    font-weight: 900;
    font-size: 3em;
    text-transform: uppercase;
    
    @include breakpoint($desktop) {
      font-size: 20vh;
    }
  }
  
  &__mask {
    font-weight: 900;
  }
  
  text {
    /* text-anchor: middle; */
  }
  
  &__alpha {
    fill: #fff;
    transition: opacity .6s ease;
  }
  
  &__base {
    fill: #fff;
    mask: url(#mask);
    transition: opacity .6s ease;
  }
}

.siteTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  line-height: 1;
  margin: 0;
  color: #fff;
  font-size: 3em;
  font-weight: 900;
  text-transform: uppercase;
  
  @include breakpoint($desktop) {
    font-size: 20vh;
  }
}

.bgImage {
  width: 100%;
  height: 100%;
  background-position: center left;
  background-size: cover;
  position: relative;
  z-index: -1;
}

#replay {
  border: 1px solid #fff;
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-color: transparent;
  height: 50px;
  color: #fff;
  text-transform: uppercase;
  padding: 0 2em;
  transition: all .3s ease;
  
  
  
  &:hover {
    background-color: #fff;
    color:#000;
  }
}