Animated Verbs III

animated-verbs-iii.markdown

Animated Verbs III

The third and final take on animating characters in verbs to represent their action.

Part one: https://codepen.io/hexagoncircle/pen/MWgbqON
Part two: https://codepen.io/hexagoncircle/pen/OJLxWKq

A Pen by Ryan Mulligan on CodePen.

License.

index.html

<main class="container">
  <h2 data-splitting class="headline headline--hide">hiding</h2>
  <h2 data-splitting class="headline headline--retreat">retreating</h2>
  <h2 data-splitting class="headline headline--break">breaking</h2>
  <h2 data-splitting class="headline headline--sway">swaying</h2>
  <h2 data-splitting class="headline headline--blink">blinking</h2>
  <h2 data-splitting class="headline headline--tumble">tumbling</h2>
</main>

script.js

Splitting();

scripts

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

style.scss

// ==================================================
// Base styles imported from original Animated Verbs
// https://codepen.io/hexagoncircle/pen/MWgbqON
// ==================================================
$colors: #fad390, #38ada9, #f7f1e3, #ff5252, #d1ccc0, #34ace0;

.headline {
  @for $i from 1 through length($colors) {
    &:nth-child(#{$i}) {
      --color: #{nth($colors, $i)};
    }
  }
}

// =========================
// Headline animations
// =========================

.headline--blink {  
  .char {
    --dur: 0.8s;
    --del: calc(var(--char-index) * 0.0125s);
    --name: blink;
    --tf: steps(1, start);
    
    opacity: 0;
  }
  
  @keyframes blink {
    50% { opacity: 1 }
  }
}

.headline--break {
  .char {
    --dur: 2s;
    --name: break-drop;
    --td: ease;
    
    color: transparent;
    overflow: visible;
    
    &:before,
    &:after {
      color: black;
      visibility: visible;
    } 
    
    &:before {
      animation: break-left var(--dur) linear infinite;
      clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
      transform-origin: 0 100%;
    } 
    
    &:after {
      animation: break-right var(--dur) linear infinite;
      clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
      transform-origin: 100% 100%;
    } 
  }
  
  @keyframes break-drop {
    20% { transform: translateY(-100%); }
    22% { transform: translateY(10%); }
    25% { transform: translateY(-5%); }
    30% { transform: translateY(0); }
  }
  
  @keyframes break-left {
    22% { transform: rotate(0) }
    25% { transform: rotate(-8deg) }
    28% { transform: rotate(-10deg) }
    30%, 100% { transform: rotate(-5deg) }
  }
  
  @keyframes break-right {
    22% { transform: rotate(0) }
    25% { transform: rotate(5deg) }
    28% { transform: rotate(10deg) translateY(10%) }
    30%, 100% { transform: rotate(4deg) translateY(5%) }
  }
}

.headline--hide {
  --dur: 4s;
  
  .word:after {
    animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
    border-top: 1vmin solid black;
    background-color: var(--color);
    content: '';
    height: 150%;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 2;
  }
  
  .char {
    --name: hide-jump;
    --del: calc(var(--char-index) * 0.04s);
    --td: cubic-bezier(0.215, 0.61, 0.355, 1);
    --dir: alternate;
    
    transform-origin: 50% 100%;
    
    &[data-char="i"]:after {
      --name: hide-peek;
      --dir: alternate;
      
      animation: var(--name) var(--dur) var(--td) infinite var(--dir);
      content: attr(data-char);
      visibility: visible;
    }
  }
  
  @keyframes hide-jump {
    0%, 10% { transform: translateY(0) }
    15% { transform: translateY(-25%) }
    20%, 100% { transform: translateY(100%) }
  }
  
  @keyframes hide-peek {
    0%, 35% { transform: translateY(0) }
    40%, 60% { transform: translateY(-40%) }
    70%, 90% { transform: translateY(-45%) skewY(10deg) }
    95%, 100% { transform: translateY(-46%) skewY(-10deg) }
  }
  
  @keyframes hide-cover {
    0%, 7% { transform: scaleX(0) }
    8%, 95% { transform: scaleX(1) }
    98%, 100% { transform: scaleX(0) }
  }
}

.headline--retreat {
  .word {
    animation: retreat-shrink 2s cubic-bezier(0.25, 1, 0.35, 1) infinite;
    transform-origin: 50% 100%;
  }
  
  .char {
    --name: retreat-stretch;
    --dur: 2s;
    --td: ease-out;
    
    transform-origin: 50% 100%;
  }
  
  @keyframes retreat-shrink {
    15% { transform: scale(1.001) }
    30%, 80% { transform: scale(0.25) }
    100% { transform: scale(1.001) }
  }
  
  @keyframes retreat-stretch {
    0%, 10% { transform: scaleY(1) }
    15% { transform: scaleY(0.5) }
    25% {
      transform:
        scaleY(4)
        rotate(calc(var(--distance-sine) * 65deg))
    }
    35% {
      transform:
        scaleY(0.80)
        rotate(calc(var(--distance-sine) * -25deg))
    }
    40% {
      transform:
        scaleY(1.10)
        rotate(calc(var(--distance-sine) * 15deg))
    }
    44% {
      transform:
        scaleY(0.98)
        rotate(calc(var(--distance-sine) * -10deg))
    }
    48% {
      transform:
        scaleY(1.01)
        rotate(calc(var(--distance-sine) * 5deg))
    }
    50% { transform: scaleY(1) }
  }
}

.headline--sway {  
  .char {
    --dur: 1s;
    --del: calc(var(--char-index) * -0.0125s);
    --name: sway;
    --td: linear;
    --dir: alternate;
  }
  
  @keyframes sway {
    from { transform: skew(-15deg) rotateX(10deg) }
      to { transform: skew(15deg) rotateX(-10deg) }
  }
}

.headline--tumble {
  .char {
    --dur: 0.8s;
    --name: bounce;
    --del: calc(var(--char-index) * -0.125s);
    --td: ease;
    
    color: transparent;
    overflow: visible;
    
    &:after {
      animation: tumble var(--dur) linear infinite;
      color: black;
      visibility: visible;
      z-index: 2;
    }
  }
  
  @keyframes bounce {
    25% { transform: translateY(-25%) }
    50% { transform: translateY(0) }
    75% { transform: translateY(-35%) }
  }
  
  @keyframes tumble {
    60% { transform: rotate(180deg) }
    100% { transform: rotate(360deg) }
  }
}

styles

<link href="https://unpkg.com/splitting@1.0.0/dist/splitting.css" rel="stylesheet" />
<link href="https://codepen.io/hexagoncircle/pen/MWgbqON" rel="stylesheet" />