Splitting Letter Overlap

index.html

<div class="text-overlap" data-splitting>Extra<b>v</b>agant</div>

script.js

Splitting();

scripts

<script src="https://unpkg.com/[email protected]/dist/splitting.js"></script>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>

splitting-letter-overlap.markdown

Splitting Letter Overlap

A Pen by Shaw on CodePen.

License.

style.scss

html { height: 100%; display: flex;}
body { margin: auto; }

html { text-align: center; background: #2A363B; color: #FFF; }
@import url('https://fonts.googleapis.com/css?family=Oswald:700');


.text-overlap {
  font-family: 'Oswald', serif;
  font-weight: 700;
  font-size: 13vw;
  text-transform: uppercase;
}

.text-overlap.splitting {

  .char {
    margin-right: -0.12em; // Overlapping
    text-shadow: 0px 0px 15px rgba(0,0,0,0.5);

    animation: 
      slide-in 2.5s cubic-bezier(0,.65,.29,1) 0s both, 
      fade-in 1.25s linear both;
    animation-delay: calc(1s + (0.5s * var(--distance-percent)));


    @keyframes slide-in {
      0% { 
        transform: translateX(1em);
        transform: translateX( calc(0.12em * var(--char-offset)) ) translateZ(0px);  
        // Start from original position
      }
    }

    @keyframes fade-in {
      from { opacity: 0;  }
    }

  }

  b {
    display: inline-block;
    color: #CF4647;    
    animation-name: slide-in-v, fade-in;
    animation-fill-mode: both;
    animation-delay: 1s;
    animation-duration: 1.75s, 1s;
    animation-timing-function: cubic-bezier(0,.7,.1,1), linear;

    @keyframes slide-in-v {
      0% { 
        opacity: 0; 
        transform: translateX(1em);
        transform: translateY(-50vh) 
      }
    }

    ~ * .char { 
      z-index: calc(1 * (var(--char-total) - var(--char-index)));
    }
  }
}

styles

<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />