Infinite Scroll

Smooth infinite scrolling component with GSAP animations and tilt effects

Configuring your account...

Please wait while we prepare everything for you

Usage

import InfiniteScroll from './InfiniteScroll';
  
const items = [
  { content: "Text Item 1" },
  { content: <p>Paragraph Item 2</p> },
  { content: "Text Item 3" },
  { content: <p>Paragraph Item 4</p> },
];
  
<div style={{height: '500px', position: 'relative'}}>
  <InfiniteScroll
    items={items}
    isTilted={true}
    tiltDirection='left'
    autoplay={true}
    autoplaySpeed={0.1}
    autoplayDirection="down"
    pauseOnHover={true}
  />
</div>

Props

PropTypeDefaultDescription
widthstring'30rem'Width of the scroll container
maxHeightstring'100%'Maximum height of the container
negativeMarginstring'-0.5em'Negative margin for items
itemsInfiniteScrollItem[][]Array of scroll items
itemMinHeightnumber150Minimum height for each item
isTiltedbooleanfalseEnable 3D tilt effect
tiltDirection'left' | 'right''left'Direction of the tilt
autoplaybooleanfalseEnable automatic scrolling
autoplaySpeednumber0.5Speed of automatic scrolling
autoplayDirection'down' | 'up''down'Direction of automatic scrolling
pauseOnHoverbooleanfalsePause autoplay on hover

InfiniteScrollItem Interface

interface InfiniteScrollItem {
  content: ReactNode;
}