Text Animation?

index.pug

- const text = 'Hello'

.stage
  .wrapper
    .slash
    .sides
      .side
      .side
      .side
      .side
    .text
      .text--backing=text
      .text--left
        .inner=text
      .text--right
        .inner=text

script.babel

const curry = f => (...args) =>
  args.length >= f.length
    ? f(...args)
    : curry(f.bind(f, ...args))
      
const compose = (f, g) => x => f(g(x))
const composeN = (...fns) => (...args) =>
  fns.reverse()
    .reduce((x, f) => f.apply(f, [].concat(x)), args)

style.stylus

// fonts
$main-font = Josefin Sans, Helvetica, Helvetica Neue, Arial, sans-serif

// colors
$page-background = #222

// measurements
$scale = 1

// functions
grayscale(n)
  if n >= 0
    rgba(255, 255, 255, n / 100)
  else
    rgba(0, 0, 0, n / -100)
    
*, *:before, *:after
  box-sizing border-box
  font-rendering optimizeLegibility
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale

html
body
  width 100%
  height 100%
  margin 0
  padding 0
  background #222
  font-family $main-font
  font-size 16px
  font-weight normal
  
.stage
  width 100%
  height 100%
  
  display flex
  align-items center
  justify-content center
  
.wrapper
  position relative
  color white
  font-size 2.5rem
  text-transform uppercase
  letter-spacing 0.25rem
  padding-top 0.65rem
  padding-left 0.5rem
  padding-right 0.36rem
  padding-bottom 0.2rem
  
.slash
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%) rotate(-24deg) scaleY(0)
  transform-origin center center
  width 0.15rem
  height 145%
  background white
  z-index 4
  animation slash 6s ease-in infinite
  
  &:before
    content ''
    display block
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    width 0.75rem
    height 120%
    background #232323
    z-index -1
    
  &:after
    content ''
    display block
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background white
  
.sides
  position absolute
  width 100%
  height 100%
  top 0
  left 0
  overflow hidden
  
  .side
    position absolute
    background white
  
  .side:nth-child(1)
    top 0
    left 0
    width 100%
    height 0.15rem
    transform translateX(-101%)
    animation side-top ease 6s infinite
  
  .side:nth-child(2)
    top 0
    right 0
    width 0.15rem
    height 100%
    transform translateY(-101%)
    animation side-right ease 6s infinite
  
  .side:nth-child(3)
    left 0
    bottom 0
    width 100%
    height 0.15rem
    transform translateX(101%)
    animation side-bottom ease 6s infinite
  
  .side:nth-child(4)
    top 0
    left 0
    width 0.15rem
    height 100%
    transform translateY(101%)
    animation side-left ease 6s infinite
  
.text
  position relative
  
.text--backing
  opacity 0
  
.text--left
  position absolute
  top 0
  left 0
  width 51%
  height 100%
  overflow hidden
  
  .inner
    transform translateX(100%)
    animation text-left 6s ease-in-out infinite
  
.text--right
  position absolute
  top 0
  right 0
  width 50%
  height 100%
  overflow hidden
  
  .inner
    transform translateX(-200%)
    animation text-right 6s ease-in-out infinite
    
@keyframes slash
  0%
    transform translate(-50%, -50%) rotate(-24deg) scaleY(0)
  6%
    transform translate(-50%, -50%) rotate(-24deg) scaleY(1)
  13%
    transform translate(-50%, -50%) rotate(-24deg) scaleY(1)
  16.6% // 1 second
    transform translate(-50%, -50%) rotate(-24deg) scaleY(0)
  100%
    transform translate(-50%, -50%) rotate(-24deg) scaleY(0)
    
@keyframes text-left
  0%
    transform translateX(100%)
  10%
    transform translateX(0)
  58%
    transform translateX(0)
  70%
    transform translateX(-200%)
  100%
    transform translateX(-200%)
    
@keyframes text-right
  0%
    transform translateX(-200%)
  10%
    transform translateX(-100%)
  58%
    transform translateX(-100%)
  70%
    transform translateX(-300%)
  100%
    transform translateX(-300%)
    
@keyframes side-top
  0%
  14%
    transform translateX(-101%)
  24%
  55%
    transform translateX(0)
  65%
    transform translateX(101%)
  100%
    transform translateX(101%)
    
@keyframes side-right
  0%
  14%
  23%
    transform translateY(-101%)
  30%
  62%
    transform translateY(0)
  72%
    transform translateY(101%)
  100%
    transform translateY(101%)
    
@keyframes side-bottom
  0%
  14%
  24%
  28%
    transform translateX(101%)
  37%
  70%
    transform translateX(0)
  79%
    transform translateX(-101%)
  100%
    transform translateX(-101%)
    
@keyframes side-left
  0%
  14%
  24%
  34%
  35%
    transform translateY(101%)
  44%
  79%
    transform translateY(0)
  86%
    transform translateY(-101%)
  100%
    transform translateY(-101%)

text-animation.markdown

Text Animation?

A Pen by Short on CodePen.

License.