How to Create a Seamless Scrolling Marquee in WordPress Using Core Gutenberg Blocks

Creating a horizontally scrolling marquee in WordPress is a fun and eye-catching way to show off client logos, testimonials, team members, or anything you want to continuously loop across the screen. In this tutorial, we’ll walk through how to do this using only core Gutenberg blocks and a bit of CSS magic. No plugins or custom HTML required!

🔄 What We’re Building

A fully native WordPress marquee built with:

Core Gutenberg Group and Heading blocks
A single reusable CSS class
Customisable speed and direction
Seamless looping with no white space gaps

🔊 Step 1: Build the Block Structure

Add a Group block
- Set alignment to Full width
- Under Advanced > Additional CSS Class(es), enter:
```
is-style-marquee speed-normal direction-left
```
Inside the Group, add another Group block
- Add multiple Heading blocks inside it (e.g. names, logos, etc.)
Duplicate that inner Group block
- This is the trick to make the marquee loop seamlessly!

You should now have an outer Group containing two identical inner Groups, each with the same content.

📄 Step 2: Add the CSS

Paste the following into Appearance > Customize > Additional CSS:

@keyframes marquee-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.is-style-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.is-style-marquee > .wp-block-group {
  display: inline-flex;
  gap: 2rem;
  min-width: max-content;
  align-items: center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.is-style-marquee.direction-left > .wp-block-group {
  animation-name: marquee-left;
}

.is-style-marquee.direction-right > .wp-block-group {
  animation-name: marquee-right;
}

.is-style-marquee.speed-slow > .wp-block-group {
  animation-duration: 40s;
}

.is-style-marquee.speed-normal > .wp-block-group {
  animation-duration: 20s;
}

.is-style-marquee.speed-fast > .wp-block-group {
  animation-duration: 10s;
}

.is-style-marquee h2 {
  flex-shrink: 0;
  margin: 0;
  font-size: 2rem;
}

⚖️ Customisation Options

Change the Speed:

Use one of these class names on your marquee:

speed-slow
speed-normal
speed-fast

Change the Direction:

Use one of these:

direction-left (default)
direction-right

You can mix and match like:

is-style-marquee speed-fast direction-right

🚀 Next Steps

Want to go further? Try replacing the Heading blocks with:

Logos (Image blocks)
Testimonial quotes (Paragraphs or Groups)
Team member names and photos

That’s it! You now have a beautiful, smooth-scrolling marquee in WordPress with no extra plugins or coding skills needed.