Building a Letter-by-Letter Hero Animation in WebflowBuilding a Letter-by-Letter Hero Animation in Webflow
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Letting a headline breathe
On the Moksha site, a breathing-device product page, the hero headline doesn't appear all at once. Each letter slides in and fades up, one after another, so the line settles slowly instead of snapping into place.
I wanted the first few seconds to feel like the product: calm and unhurried, not loud.
The trade-off was in Webflow. Its built-in interactions move whole elements, not single letters, so I added a small script that splits the headline into letters and staggers them. It works well, but that piece lives in custom code, outside the visual editor.
The site is live here: https://wip-site-moksha.webflow.io/
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started