AutoScroll: React component

The AutoScroll component provides an infinite scrollable container that automatically scrolls to the left.

Five components scroll a row

Pick by the job. Carousel shows one image or slide at a time, with line or thumbnail indicators and autoplay. Swiper is a touch-first gallery on native scroll snapping. ScrollContainer moves a run of cards or tiles, with drag, wrap-around, markers and proximity scaling. Scroller scrolls overflowing chips, tabs or cards behind arrow buttons and edge fades. AutoScroll is a marquee that moves on its own. 3.0 plans to consolidate them.

AutoScroll

<AutoScroll>
  <Logo wordmark="/logo.svg" size="s" href="#" dark/>
  <Logo wordmark="/logo.svg" size="s" href="#" light/>
  <Logo wordmark="/logo.svg" size="s" href="#" dark/>
  <Logo wordmark="/logo.svg" size="s" href="#" light/>
  <Logo wordmark="/logo.svg" size="s" href="#" dark/>
  <Logo wordmark="/logo.svg" size="s" href="#" light/>
</AutoScroll>

Speed

The speed prop controls the speed of the scrolling.

Speed

<AutoScroll speed="fast">
  <Logo wordmark="/logo.svg" size="s" href="#" dark/>
  <Logo wordmark="/logo.svg" size="s" href="#" light/>
  <Logo wordmark="/logo.svg" size="s" href="#" dark/>
  <Logo wordmark="/logo.svg" size="s" href="#" light/>
  <Logo wordmark="/logo.svg" size="s" href="#" dark/>
  <Logo wordmark="/logo.svg" size="s" href="#" light/>
</AutoScroll>

Fade

Combine with the <Fade> component to create a fade-in and fade-out effect.

Fade

<>
  <Fade zIndex="1" to="right" fillHeight width="64" position="absolute" left="0" top="0"/>
  <AutoScroll paddingY="40">
    <Logo wordmark="/logo.svg" size="s" href="#" dark/>
    <Logo wordmark="/logo.svg" size="s" href="#" light/>
    <Logo wordmark="/logo.svg" size="s" href="#" dark/>
    <Logo wordmark="/logo.svg" size="s" href="#" light/>
    <Logo wordmark="/logo.svg" size="s" href="#" dark/>
    <Logo wordmark="/logo.svg" size="s" href="#" light/>
  </AutoScroll>
  <Fade zIndex="1" to="left" fillHeight width="64" position="absolute" right="0" top="0"/>
</>

API Reference

	Type	Default
children	React.ReactNode	—
speed	slowmediumfast	medium
hover	slowpausenone	slow
reverse	boolean	false
className	string	—
style	React.CSSProperties	—
scrollGap Gap between the repeated copies of the track.	numberstring	—
…and every FlexProps prop	inherited	—