Rolling Text is a hover-driven text component for Framer that introduces motion at the character level. Instead of changing the whole label at once, each letter transitions in sequence, creating a subtle rolling effect that feels precise, responsive, and intentional.
It is designed for designers who want interaction detail without adding visual noise. The component works especially well for navigation, call-to-actions, and text-based interface elements where small motion cues can make the experience feel more considered.
Typography stays fully customizable through Framer’s font controls, while the animation can be tuned through presets or manual settings. This makes it easy to move from restrained and elegant to faster and more pronounced, depending on the tone of the site.
Character-based hover animation with vertical movement
Sequential timing for a more natural interactive rhythm
Built-in presets for faster setup
Manual controls for timing, easing, opacity, and movement distance
Upward/Downward roll direction
Text | Defines the label shown in the component
Link | Assigns a destination URL or page
New Tab | Chooses whether the link opens in a new tab
Font | Controls family, size, weight, spacing, alignment, and more
Color | Sets the text color
Preset | Select a ready-made motion style or switch to Custom
Easing | Defines how the motion accelerates and settles
Reveal Opacity | Sets the opacity of the revealed letter state
Distance | Controls how far letters travel vertically
Speed | Sets the animation duration per character
Stagger | Offsets the start time between characters
Direction | Switches the movement upward or downward
Padding X/Y
Benni Tran
