Scrolling Text

A dynamic background component that cycles through a list of texts at a specified interval.

Options

• text | (string|array<string>): text or list of texts to be displayed. Default: [].
• loop | boolean: indicates whether the process shall be displayed infinitely. Default: false.
• direction | string: the direction of the text flow (either left, right, up, down, tracking, focus, or swirl). Default: 'right'.
• hold | number: the time the text remains still (in seconds). Default: 5.
• wait | number: the time before a new text arrives (in seconds). Default: 3.
• inTime | number: time of the entrance effect (in seconds). Default: 1.
• outTime | number: time of the exit effect (in seconds). Default: 1.
• className | string: class name. Default: ''.
• style | object: CSS styles of the text. Default: {}.

Examples

• Minimal
• List of Texts
• Background Image

Live Editor

<ScrollingText text="This is a text re-appearing every five seconds" style={{ fontSize: 44, color: 'blue' }} wait={5} hold={2} loop />

<ScrollingText
    text="This is a text re-appearing every five seconds"
    style={{ fontSize: 44, color: 'blue' }}
    wait={5}
    hold={2}
    loop
/>

Result

ReferenceError: Provider is not defined