A hover text animation where characters roll vertically to reveal a duplicate line beneath.
Hover Text Roll is an animated typography effect powered by GSAP and SplitText. The heading is split into individual characters and duplicated in an overlay layer. When the user hovers over the text, the original characters slide downward while the overlay characters roll into view from above, creating a smooth vertical text transition. The animation is staggered per character for a refined cascading effect and reverses when the pointer leaves.
npm i gsap @gsap/react
Ideal for navigation links, hero headings, portfolio titles, buttons, and interactive typography where subtle motion enhances visual engagement.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Controls the easing curve used when characters roll vertically during the hover transition. |
| duration | number | Duration (in seconds) of the character roll animation. |
| stagger | number | Delay between each character animation, creating the cascading roll effect. |
| direction | string | Defines the origin of the stagger sequence for the character animation. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code, it is already optimized and production-ready out of the box.
© 2026 dropui.design