Framer Motion Ticker

A simple ticker made with framer-motion. Infinitely and seamlessly scroll through elements.

Not using framer-motion? Check out @andremov/react-ticker — the same ticker without the framer-motion dependency.

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 animation cycle | | direction | -1 | 1 | -1 | Scroll direction (-1 left, 1 right) | | isPlaying | boolean | true | Whether the ticker is playing | | onMouseEnter | () => void | noop | Callback when mouse enters the ticker | | onMouseLeave | () => void | noop | Callback when mouse leaves the ticker |

Using the Ticker example folder

cd example && npm install

npm run dev