Chapter 110: Ticker

Core Idea

Create infinitly-scrolling ticker and marquee effects with Motion for Vue's Ticker component. Looping, dragging and scrolling animations are all possible with this lightweight and performant component.

Code Examples

{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://motion.dev/#org","name":"Motion","url":"https://motion.dev","logo":"https://motion.dev/favicon-512.png","sameAs":["https://x.com/motiondotdev","https://github.com/motiondivision","https://www.youtube.com/@motiondotdev"]},{"@type":"WebSite","@id":"https://motion.dev/#website","url":"https://motion.dev","name":"Motion","publisher":{"@id":"https://motion.dev/#org"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Ticker | scrolling marquee animations in Vue","description":"Create infinitly-scrolling ticker and marquee effects with Motion for Vue's Ticker component. Looping, dragging and scrolling animations are all possible with this lightweight and performant component.","url":"https://motion.dev/docs/vue-ticker","mainEntityOfPage":"https://motion.dev/docs/vue-ticker","inLanguage":"en","datePublished":"2024-12-04T00:00:00.000Z","articleSection":"Motion+","publisher":{"@id":"https://motion.dev/#org"},"image":"https://images.motion.dev/og/fresh/v1/site/docs-vue-ticker-1vhqbejdotpeg.png"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Motion","item":"https://motion.dev/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://motion.dev/docs"},{"@type":"ListItem","position":3,"name":"Ticker | scrolling marquee animations in Vue","item":"https://motion.dev/docs/vue-ticker"}]}

• What it demonstrates: Core usage pattern for Ticker.

Key Takeaways

1. Lightweight: Just +2.6kb on top of Motion for Vue.
2. Accessible: Focus trapping for unobtrusive keyboard navigation and mandatory respect f.
3. Multiaxis: Create either vertical or horizontal tickers.
4. Flexible: Defaults to a velocity-based animation but can be powered by your own motion.
5. Performant: Clones the theoretical minimum of elements.

Connects To

• Motion values: related Motion doc page.
• Vue <motion /> component: related Motion doc page.