Skip to main content

Vertical marquee

VerticalMarquee scrolls overflowing content vertically with a CSS animation, suited for notice boards and credit rolls.

Example

<div
  className="border rounded p-2"
  style={{
    height: '6rem'
  }}
>
  <VerticalMarquee>
    <ul className="list-unstyled m-0">
      <li>
        🎉 Idea React v3 alpha is out
      </li>
      <li>
        📦 Install with npm i idea-react@next
      </li>
      <li>
        🧩 Bootstrap 6 official component wrappers
      </li>
      <li>
        ⚡ Powered by MobX and TypeScript
      </li>
    </ul>
  </VerticalMarquee>
</div>

Behavior

Content shorter than the container stays still; overflowing content scrolls upward in a loop and pauses on hover. Set the scroll duration in seconds to tune the speed.

<VerticalMarquee duration={10}>{notices}</VerticalMarquee>

See the Horizontal marquee for the horizontal variant.