Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated Verbs III
<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>
Splitting();
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
// ==================================================
// 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) }
}
}
<link href="https://unpkg.com/splitting@1.0.0/dist/splitting.css" rel="stylesheet" />
<link href="https://codepen.io/hexagoncircle/pen/MWgbqON" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.