framer-motion-ticker
v1.0.19
Published
A React component that acts like a ticker, or marquee.
Downloads
3,442
Maintainers
Readme
Framer Motion Ticker
A simple ticker made with framer-motion
. Infinitely and seamlessly scroll through elements.
Installation
npm install framer-motion-ticker
Basic Usage
import React from 'react';
import Ticker from 'framer-motion-ticker';
function App() {
const colors = ['#632bf3', '#f122c8', '#f16022', '#9ef344', '#44d3f3'];
return (
<div className="App">
<Ticker duration={20}>
{colors.map((item, index) => (
<div
key={index}
style={{
backgroundColor: item,
margin: '5px',
height: '250px',
width: '200px',
}}
/>
))}
</Ticker>
</div>
);
}
export default App;
Examples
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