Moving Carousel Component

The Moving Carousel component creates smooth, infinite-scrolling content displays powered by GSAP animations. Perfect for showcasing logos, testimonials, or any repeating content that benefits from continuous motion.

Live Demo

Key Features

• Infinite Scroll: Seamless looping animation

• Pause on Hover: Interactive pause/resume functionality

• Touch Support: Mobile-friendly interaction

• Customizable Speed: Adjustable scroll speed

Implementation

Basic usage with default settings:

1
<CarouselMoving>
2
    <div class="carousel-item">Content 1</div>
3
    <div class="carousel-item">Content 2</div>
4
    <div class="carousel-item">Content 3</div>
5
</CarouselMoving>

Advanced implementation with all options:

1
<CarouselMoving
2
    fadeEdges
3
    scrollSpeed={75}
4
    class="custom-carousel"
5
    rowProps={{
6
        class: 'items-center gap-4',
7
    }}
8
    {items.map((item) => <div class="carousel-item">{item}</div>)}
9
</CarouselMoving>

Moving Carousel Component Props API

Best Practices

1. Content Guidelines

   • Use consistent item widths
   • Maintain readable content while in motion
   • Include enough items to fill the container
   • Ensure smooth visual flow between items

2. Performance Tips

   • Optimize images and SVGs
   • Limit the number of complex DOM elements
   • Use appropriate scroll speeds for content type
   • Consider reduced motion preferences

3. Responsive Design

   • Test on various screen sizes
   • Adjust scroll speed for viewport width
   • Ensure content remains legible on mobile
   • Consider pausing on smaller screens

Common Use Cases