Ticker

Create performant, flexible, and fully accessible infinite-scrolling tickers and marquee effects in React with the Motion+ Ticker component. Perfect for showcasing logos, testimonials and more.

Why Motion+ Ticker?

Motion+ Ticker is a production-ready component built with performance and accessibility at its core.

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

• Accessible: Automatic support for "reduced motion" and intelligent keyboard focus-trapping means your site is inclusive for all users.

• Flexible: Animate horizontally or vertically. Control the animation with velocity, scroll position, or drag gestures.

• Performant: Creates the absolute minimum number of cloned elements required to fill the viewport. Read more about Motion+ Ticker's unique renderer. More efficient and maintainable than hand-rolled CSS tickers.

Overview

Motion+ Ticker's simple API makes infinite ticker animations simple to build and maintain. Items are automatically repeated, meaning the absolute minimum number of clones are created for the current viewport.

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

Powered by <motion> components, you can 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:

Unlike most tickers, it's possible to lay the ticker out inline within a narrow container and have the items visually extend out to the edges of the viewport.

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