Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Nov 26, 2019
Embed
What would you like to do?
Splitting: Laser Write
<div class="title">
<span class="text write" data-splitting="lines">
RETRO<br/>
LASER<br/>
WRITE
</span>
<span aria-hidden="true" class="text laser" data-splitting="lines">
RETRO<br/>
LASER<br/>
WRITE
</span>
</div>
Splitting();
// Hover over the title to pause the CSS animation
<script src="https://unpkg.com/splitting/dist/splitting.js"></script>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>

Splitting: Laser Write

This is an example for getting a sharp glow on the edge of the mask of a text clip-path animation.

By applying a filter blur followed by a high contrast on an element wrapping a thin clip-path animation we can give it the appearance of a bright glow without accidentally masking the glow filter itself in the same clip-path.

We then animate this together with a second layer that masks sharp/unblurred text behind it, which uses an CSS animation that follows the glow at the same time.

A Pen by Martin Pitt on CodePen.

License.

html, body { background: hsl(220, 80%, 8%); }
html { height: 100%; display: flex; }
body { margin: auto; }
.title {
position: relative;
text-align: center;
transform: translateZ(0);
transform-style: preserve-3d;
}
.title .text {
font-family: sans-serif;
font-weight: 400;
font-size: calc(20vw / var(--word-total) );
line-height: 1.0;
}
.title .write .word {
color: hsl(0, 0%, 80%);
text-shadow: 0 0 0.1em currentColor;
transform-style: preserve-3d;
animation: write linear both;
}
.title .laser {
position: absolute;
top: 0;
left: 0;
/* To avoid the blur getting masked by the clip-path we had to duplicate the element */
filter: blur(4px) contrast(10);
pointer-events: none;
}
.title .laser .word {
display: inline-block;
}
.title .laser .word {
color: hsl(0, 100%, 75%);
text-shadow: 0 0 0.1em currentColor;
transform: translateZ(5px);
animation: laser linear both;
}
.title .write .word,
.title .laser .word {
animation-duration: 4s;
animation-delay: calc(0.3s + var(--word-index) * 160ms);
animation-iteration-count: infinite;
}
.title:hover .word,
.title:hover .word {
animation-play-state: paused;
}
/* .title .text .word,
.title .text .word::before {
animation-play-state: paused;
animation-delay: -0.4s;
} */
@keyframes write {
from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
70%, to { clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
}
@keyframes laser {
from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
70%, to { clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
}
<link href="https://unpkg.com/splitting@0.11.3/splitting.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment