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

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