Build an Infinite Page Component

In a recent project, I wanted to display an extensive list of items in an infinite row to keep things compact and easy to navigate in either direction. I’ve previously handled infinite paging in react-view-pager but wanted to build a new implementation in framer-motion since I could greatly simplify things. There are a few tricky pieces to this component, so let’s get started!

Follow along with the Codesandbox demo here:

Start with the API

First, we’ll start by stubbing out the initial API for our Page component. Doing this helps to formulate what the implementation will look like:

1import randomGradient from 'random-gradient'
2import { Page, View } from './Page'
3
4function App() {
5  return (
6    <Page>
7      {[0, 1, 2, 3, 4, 5].map((index) => (
8        <View
9          key={index}
10          width={400}
11          height={400}
12          color={randomGradient(index)}
13        />
14      ))}
15    </Page>
16  )
17}

Initial implementation

We’ll start by implementing the parent Page component. We need a track that moves along the x axis:

1import { motion } from 'framer-motion'
2
3function Page() {
4  return (
5    <motion.div>
6      <motion.div>{children}</motion.div>
7    </motion.div>
8  )
9}