A React component that acts like a ticker, or marquee.
npm install framer-motion-tickerframer-motion. Infinitely and seamlessly scroll through elements.
npm install framer-motion-ticker
`
Basic Usage
`jsx
import React from 'react';
import Ticker from 'framer-motion-ticker';
function App() {
const colors = ['#632bf3', '#f122c8', '#f16022', '#9ef344', '#44d3f3'];
return (
{colors.map((item, index) => (
key={index}
style={{
backgroundColor: item,
margin: '5px',
height: '250px',
width: '200px',
}}
/>
))}
);
}
export default App;
`
Examples
Live Demo
example repo
Ticker props
| props | type | default | description |
| -------- | ------ | ------- | ----------------------- |
| duration | number | 10 | duration of one segment |
Using the Ticker example folder
`
cd example && npm install
npm run dev
``