Marquee

Usage

import { Marquee } from "@chakra-ui/react"

<Marquee.Root>
  <Marquee.Viewport>
    <Marquee.Content>
      <Marquee.Item />
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

Examples

Reversed

Use the reverse prop on the Marquee.Root component to reverse the direction of the marquee.

Vertical Animation

To animate content along the Y axis, use the side prop and set it to bottom.

Speed

Use the speed prop to control the animation speed in pixels per second.

Pause On Interaction

Use the pauseOnInteraction prop to pause the animation when the user hovers or focuses the marquee.

Store

Use the Marquee.RootProvider and useMarquee hook to provide the marquee instance to the component and control the animation state programmatically.

Finite Loops

To loop the marquee a finite number of times, set the loopCount prop on Marquee.Root. Alternatively, use the onLoopComplete and onComplete callbacks to track the number of completed loops or when the animation fully finishes.

<Marquee.Root
  loopCount={3}
  onLoopComplete={() => {
    /* handle loop completion */
  }}
  onComplete={() => {
    /* handle animation end */
  }}
>
</Marquee.Root>

Edge Gradient

Render the Marquee.Edge component to apply an edge fade.

Multiple

Here's an example of how to render alternating marquee components.

Diagonal

Here's an example of how to animate content diagonally using the marquee component.

News Ticker

Here's an example of how to implement a news ticker with the marquee component.

Image Gallery

Here's an example of a 3D perspective image gallery with multiple vertical marquees scrolling in alternating directions.

Testimonials

You can display testimonials with the marquee component.

RTL Support

The marquee component supports RTL (right-to-left) layouts. Wrap the component with LocaleProvider to enable RTL mode.

Guide

CSS Variables

The marquee component exposes CSS variables that can be used to customize its behavior and appearance.

<Marquee.Root
  css={{
    "--marquee-duration": "30s",
    "--marquee-delay": "0s",
    "--marquee-loop-count": "infinite",
    "--marquee-edge-color": "colors.bg",
    "--marquee-edge-size": "20%",
  }}
>
</Marquee.Root>

Props