Ticker

Ticker makes it quick and simple to build infinitely-scrolling marquee-style animations.

It's exclusive to Motion+ members. Motion+ is a one-time fee, all-in membership that offers exclusive components, premium examples and access to a private Discord community.

Motion+ Ticker is:

• Lightweight: Just +2.1kb on top of Motion for React.

• Accessible: Focus trapping for unobtrusive keyboard navigation and mandatory respect for "reduced motion" OS settings.

• Multiaxis: Create either vertical or horizontal tickers.

• Flexible: Defaults to a velocity-based animation but can be powered by your own motion values.

• Performant: Clones the theoretical minimum of elements.

Its simple API makes infinite tickers quick to make. Items are automatically repeated, meaning the absolute minimum number of clones are created for the current viewport.

<Ticker items={["😂"]} />

Powered by <motion> components, it's straightforward to drive the ticker offset with motion values to create scroll-driven or draggable tickers.

const { scrollY } = useScroll()

return <Ticker offset={scrollY} />

It's also fully compatible with other Motion components, like AnimatePresence and Cursor:

In this guide, we'll learn how to install Ticker and use it to create various animation effects.