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
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | '30rem' | Width of the scroll container |
maxHeight | string | '100%' | Maximum height of the container |
negativeMargin | string | '-0.5em' | Negative margin for items |
items | InfiniteScrollItem[] | [] | Array of scroll items |
itemMinHeight | number | 150 | Minimum height for each item |
isTilted | boolean | false | Enable 3D tilt effect |
tiltDirection | 'left' | 'right' | 'left' | Direction of the tilt |
autoplay | boolean | false | Enable automatic scrolling |
autoplaySpeed | number | 0.5 | Speed of automatic scrolling |
autoplayDirection | 'down' | 'up' | 'down' | Direction of automatic scrolling |
pauseOnHover | boolean | false | Pause autoplay on hover |
InfiniteScrollItem Interface
interface InfiniteScrollItem {
content: ReactNode;
}