RollText

Quick Start

RollText is used to reveal text that does not fit in the element itself. Use forward to control the scrolling direction, and place the text in the default slot. Set width / height directly on the component when you need a constrained viewport.

Horizontal

<fv-roll-text
    style="width: 260px;"
    :theme="theme"
    forward="right"
    mode="once"
    :duration="2500"
    :offset="160"
>
    This title is too long for a narrow navigation bar
</fv-roll-text>

Vertical

<fv-roll-text
    style="width: 240px; height: 72px; border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 4px 8px;"
    :theme="theme"
    forward="down"
    mode="loop"
    :duration="2500"
    :interval="600"
>
    <div style="height: 22px; line-height: 22px;">1. First announcement</div>
    <div style="height: 22px; line-height: 22px;">2. Second announcement</div>
    <div style="height: 22px; line-height: 22px;">3. Third announcement</div>
    <div style="height: 22px; line-height: 22px;">4. Fourth announcement</div>
    <div style="height: 22px; line-height: 22px;">5. Fifth announcement</div>
</fv-roll-text>

Modes

The mode prop supports:

• once: a single one-way scroll.
• repeat: repeat one-way scrolling, with interval as the pause before restarting from the beginning.
• bounce: one back-and-forth scroll.
• loop: continuous back-and-forth scrolling.
• none: disable auto scrolling, useful when you only want manual scrolling.

<fv-roll-text
    style="width: 260px;"
    :theme="theme"
    forward="right"
    mode="loop"
    :duration="1800"
    :interval="400"
    :offset="120"
>
    Loop back and forth
</fv-roll-text>

Manual Scrolling

Set manual to allow wheel or touch scrolling. Manual scrolling is locked while auto scrolling is active, so use mode="none" for a purely manual sample.

<fv-roll-text
    style="width: 240px; height: 72px; border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 4px 8px;"
    :theme="theme"
    forward="down"
    mode="none"
    :manual="true"
>
    <div style="height: 22px; line-height: 22px;">1. First announcement</div>
    <div style="height: 22px; line-height: 22px;">2. Second announcement</div>
    <div style="height: 22px; line-height: 22px;">3. Third announcement</div>
    <div style="height: 22px; line-height: 22px;">4. Fourth announcement</div>
    <div style="height: 22px; line-height: 22px;">5. Fifth announcement</div>
</fv-roll-text>

Hover Trigger

Use trigger="hover" to start the animation only while the mouse is over the component. The animation stops when the mouse leaves.

<fv-roll-text
    style="width: 260px;"
    :theme="theme"
    forward="right"
    mode="loop"
    :duration="1800"
    :interval="400"
    :offset="120"
    trigger="hover"
>
    This is a long title that cannot fit inside a narrow navigation bar, so it keeps scrolling while the mouse is hovering over it
</fv-roll-text>

Properties

---

Property	Type	Required	Default	Statement
forward	string	No	'right'	Scrolling direction. Supports right, left, horizontal, down, up, and vertical.
mode	string	No	'once'	Playback mode. Supports once, repeat, bounce, loop, and none.
trigger	string	No	'auto'	Animation trigger. auto starts automatically; hover starts on mouse enter and stops on mouse leave.
duration	number	No	3000	Duration of one scroll, in milliseconds.
delay	number	No	0	Delay before the animation starts, in milliseconds.
interval	number	No	1000	Pause between repeated or bounced cycles, in milliseconds.
offset	number / string	No	null	Scroll travel distance in pixels. When null, the full overflow distance is used automatically. Set 0 to disable scrolling.
ease	string	No	'power1.inOut'	GSAP easing used for the scroll animation.
manual	boolean	No	false	Whether the mouse / touch can scroll manually. Manual scrolling is always disabled while auto scrolling is active.
theme	string	No	'global'	Theme style. Supports global, light, dark, and custom.
disabled	boolean	No	false	Whether the component is disabled.
lang	string	No	"global"	Language option.

Events

---

EmitName	Arguments	Statement
start	-	Emitted when the animation starts.
iteration	-	Emitted each time a repeated or bounced cycle completes.
end	-	Emitted when a finite animation finishes.

Slots

---

1. Default

The default slot contains the text to be scrolled.

<fv-roll-text>
    Content
</fv-roll-text>