Marquee

An infinite scrolling animation component for logos and content.

Basic Usage

Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5
dart
1
2
3
4
5
6
7
8
9
DMarquee(
  children: [
    img(src: '/logos/logo1.svg', classes: 'h-8'),
    img(src: '/logos/logo2.svg', classes: 'h-8'),
    img(src: '/logos/logo3.svg', classes: 'h-8'),
    img(src: '/logos/logo4.svg', classes: 'h-8'),
    img(src: '/logos/logo5.svg', classes: 'h-8'),
  ],
)

Direction: Left (Default)

Left 1
Left 2
Left 3
Left 4
Left 1
Left 2
Left 3
Left 4
dart
1
2
3
4
DMarquee(
  direction: DMarqueeDirection.left,
  children: [...],
)

Direction: Right

Right 1
Right 2
Right 3
Right 4
Right 1
Right 2
Right 3
Right 4
dart
1
2
3
4
DMarquee(
  direction: DMarqueeDirection.right,
  children: [...],
)

Speed

Control the animation speed with the duration property (in seconds):

Slow (40s)

Slow
Motion
Items
Slow
Motion
Items

Fast (10s)

Fast
Motion
Items
Fast
Motion
Items
dart
1
2
3
4
5
6
7
8
9
10
11
// Slow
DMarquee(
  duration: 40,
  children: [...],
)

// Fast
DMarquee(
  duration: 10,
  children: [...],
)

Pause on Hover

Pause enabled (default) - hover to pause

Hover me
To pause
Animation
Hover me
To pause
Animation

Pause disabled

No pause
On hover
Here
No pause
On hover
Here
dart
1
2
3
4
5
6
7
8
9
10
11
// Enabled (default)
DMarquee(
  pauseOnHover: true,
  children: [...],
)

// Disabled
DMarquee(
  pauseOnHover: false,
  children: [...],
)

Custom Gap

Wide
Gap
Between
Items
Wide
Gap
Between
Items
dart
1
2
3
4
DMarquee(
  gap: 'gap-12',
  children: [...],
)

Multiple Rows

Row 1
Item A
Item B
Row 1
Item A
Item B
Row 2
Item C
Item D
Row 2
Item C
Item D
Row 3
Item E
Item F
Row 3
Item E
Item F
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div(classes: 'space-y-4', [
  DMarquee(
    direction: DMarqueeDirection.left,
    duration: 25,
    children: row1Items,
  ),
  DMarquee(
    direction: DMarqueeDirection.right,
    duration: 30,
    children: row2Items,
  ),
  DMarquee(
    direction: DMarqueeDirection.left,
    duration: 20,
    children: row3Items,
  ),
])

API Reference

DMarquee

Prop Type Default Description
children List<Component> required Content to scroll
direction DMarqueeDirection left Scroll direction
duration int 20 Animation duration (seconds)
pauseOnHover bool true Pause on hover
gap String 'gap-8' Gap between items
classes String? null Custom CSS classes

DMarqueeItem

Prop Type Default Description
child Component required Item content
classes String? null Custom CSS classes

DMarqueeDirection

Value Description
left Scroll left
right Scroll right