Free Webflow components / Effect: text lift on hover
Webflow text hover effect: letters roll up one by one
A free letter-by-letter text hover effect for Webflow. Copy it, press ⌘V in the Designer, and change the words. Each letter lifts after the one before it.
- JavaScript
- Responsive
What you receive in Webflow
- 12 native elements and 6 classes.
- Breakpoints: mobile landscape (767px).
- 2 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.
How to paste it
- Click Copy for Webflow.
- Open your page in the Webflow Designer.
- Press ⌘V or Ctrl+V.
HTML
<section class="tl">
<div class="tl-inner">
<p class="tl-eyebrow">Menu</p>
<nav class="tl-list" aria-label="Main">
<a class="tl-link" href="#">Work</a>
<a class="tl-link" href="#">Studio</a>
<a class="tl-link" href="#">Journal</a>
<a class="tl-link" href="#">Contact</a>
</nav>
<p class="tl-hint">Hover a word: its letters roll up one after another.</p>
</div>
</section>
<style>
.tl { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #0b0b0f; color: #f4f4f5; padding: 112px 24px; }
.tl-inner { max-width: 980px; margin: 0 auto; }
.tl-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a1a1aa; margin: 0 0 28px; }
.tl-list { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tl-link { display: block; overflow: hidden; font-size: 96px; font-weight: 700; line-height: 1.08; height: 1.08em; letter-spacing: -0.04em; color: #f4f4f5; text-decoration: none; }
.tl-char { display: inline-block; text-shadow: 0 1.08em 0 #f97316; transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1); transition-delay: calc(var(--i, 0) * 22ms); }
.tl-link:hover .tl-char, .tl-link:focus-visible .tl-char { transform: translateY(-1.08em); }
.tl-link:focus-visible { outline: 2px solid #f97316; outline-offset: 6px; }
.tl-hint { font-size: 16px; color: #71717a; margin: 36px 0 0; }
@media (max-width: 767px) { .tl { padding: 80px 20px; } .tl-link { font-size: 56px; } }
@media (prefers-reduced-motion: reduce) { .tl-char { transition: none; } }
</style>
<script>
document.querySelectorAll(".tl-link").forEach(function (link) {
if (link.querySelector(".tl-char")) return;
var text = link.textContent;
link.setAttribute("aria-label", text.trim());
link.textContent = "";
Array.prototype.forEach.call(text, function (ch, i) {
var s = document.createElement("span");
s.className = "tl-char";
s.setAttribute("aria-hidden", "true");
s.style.setProperty("--i", i);
s.textContent = ch === " " ? " " : ch;
link.appendChild(s);
});
});
</script>
More examples
Questions
How does the stagger work?
A small script splits each link into letters and gives every letter its own delay. The script runs on your published site, so the Designer shows the plain words.
Can I change the hover color?
Yes. The colored copy is a text shadow on the letters, set in the custom code Embed. Change #f97316 to your brand color.
Is this effect component free?
Yes. Copy it with no account and use it on client sites and your own sites.
Does it work on the free Webflow plan?
Yes. It pastes on every Webflow plan, including Starter. If it includes an Embed element, editing that Embed's code needs a paid site plan.