< All Topics

Scroll Text

The Scroll Text Block (Free) allows you to display animated text that smoothly comes into view as users scroll through the page. It’s ideal for highlighting key content, taglines, or important messages in a visually appealing way. With multiple animation effects, typography controls, and styling options, you can make text stand out without custom code.

Adding the block

To add the block:

Block settings

General – Content

  • Text – Enter the text you want to display. This can be a paragraph, tagline, or any message you want to animate.
  • Scroll Effect – Choose the animation style for how text appears as users scroll:
    • Fade, Blur, Color, Slide, 3D Flip, Skew
  • Text Split By – Decide whether the animation applies by Letter or Word.
  • Animation Settings – Control how the scroll animation behaves:
    • Start Element Position (%) – The position of the element itself when the animation begins.
    • Start Viewport Position (%) – Where in the viewport the animation should start (e.g., 80% means when the element is mostly in view).
    • End Element Position (%) – The position of the element at the end of the animation.
    • End Viewport Position (%) – Where the animation ends in the viewport (e.g., 40% means before it fully scrolls past).

Text settings

  • Text Alignment – Align your text left, center, or right.
  • Normal / Hover – Customize styles for text in both default and hover states.
  • Text Color – Pick the color of your animated text.
  • Typography – Adjust:
    • Size (px)
    • Letter Spacing
    • Font Appearance (weight/style)
    • Decoration (underline, overline, strikethrough)
    • Letter Case (uppercase, lowercase, capitalize)

Block styling

  • Padding & Margin – Control spacing inside (padding) and outside (margin) the block for better layout control.
  • Border – Define border thickness (px).
  • Radius – Adjust border radius (px) to round the corners of the block.