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