Create a Super Simple yet Effective Marquee with Motion.page - WordPress 🔥
In today’s video, Luke demonstrates how to create a seamless, looping marquee effect using Motion Page and Bricks Builder. This effect is commonly used for scrolling logos or text across the screen, often as a visual enhancement or a form of social proof. Luke walks through the process step-by-step, addressing common mistakes and showing how to achieve a perfectly smooth scroll in both directions.
Steps
Setting Up the Page in Bricks Builder:
Create a New Page:
Start by creating a blank page (e.g., “Marquee”) in Bricks Builder to host the marquee effect.
Add Initial Content:
Insert a dummy section from a template above the marquee for context.
Insert a Section for the Marquee:
Add a new section where the marquee will be built. Inside this, create a wrapper block that will contain the scrolling items.
Create Duplicate Rows:
Add two identical blocks (rows) inside the wrapper, each containing the same set of logos. This is key for creating the infinite loop illusion.
Structuring the Marquee Layout:
Apply Horizontal Layout:
Use utility classes (e.g., m-wrapper) to set the wrapper’s layout to horizontal (row), and give each row block a min-width of 100% so they sit side by side.
Remove Gaps Between Logos:
Avoid using column gaps, which can break the loop. Instead, wrap each logo in its own block and apply padding to the wrapper blocks to maintain spacing.
Use Columns for Logo Placement:
Apply a class like columns-4 to divide the row into four equal sections, then place one SVG logo in each column.
Preparing the Animation in Motion Page:
Open Motion Page & Create a Timeline:
Create a new timeline (e.g., “Marquee”) and set it to trigger on page load with infinite looping.
Target the Elements:
Use a wildcard selector to target the two inner row blocks inside the marquee wrapper.
Apply the Animation:
Translate the wrapper content along the X-axis (e.g., -100%) with no easing for a consistent scroll. Adjust the timeline duration for desired speed (e.g., 15–30 seconds).
Fix Loop Snapping Issues:
If a snapping effect occurs, it’s likely due to the use of gaps. Wrapping each logo and applying padding ensures a smooth, continuous transition.
Creating a Bi-Directional Marquee:
Duplicate and Rename Rows:
Create a second wrapper section for the marquee that scrolls in the opposite direction. Offset it using justify-content: end.
Apply Opposite Scroll Animation:
In Motion Page, duplicate the first timeline, reverse the translation direction (+100% instead of -100%), and assign it to the new wrapper.
Enhancing the Visual Presentation:
Add Gradient Overlay:
To create a soft fade on the edges, add an overlay block with absolute positioning and apply a gradient background. Make the middle transparent and match the outer stops to the page background.
Refine the Aesthetics:
Adjust the animation duration and overlay gradient angle (e.g., 90°) for a more polished and subtle visual effect.
Conclusion
Luke’s tutorial provides a simple yet elegant method for creating smooth, continuous marquee animations using Bricks Builder and Motion Page. By avoiding common pitfalls like layout gaps and leveraging Motion Page’s timeline tools, designers can deliver visually engaging scrolling sections that add polish and credibility to any site. Whether you’re showcasing brand logos or creating animated headlines, this technique is a powerful addition to any web design toolkit.
Video transcript
Hi guys, welcome back to the channel.
My name is Luke, and today’s tutorial is going to be a very short one.
We recently had a user request a simple marquee effect using Motion.page, and I realized I couldn’t link them to one of our tutorials—because we didn’t have one. So I thought I’d make this quick YouTube tutorial to show you an example of a marquee effect.
In today’s example, I’m going to show you the marquee in a loop, so it keeps scrolling forever. We’ll do two examples: one scrolling to the left, and one to the right. It’s pretty simple stuff and shouldn’t take too long.
This tutorial will once again be using Bricks Builder, so let’s get started.
As a prerequisite, I’ll be using SVGs from the website logo.com. We’ll use them as examples—sort of like social proof inside the marquee.
Let’s go to our Pages. I’ve already created a blank page called “Marquee,” and I’ll edit it with Bricks.
First, I’ll add a section from a template so we have some dummy content. I’m going to use one of the prebuilt sections, and then below that, I’ll add the main focal point of today’s video.
Inside this new container, I want to add a block. Blocks span 100% width by default, and this is going to be my main container. I’ll call this the “wrapper.” It will contain two more blocks: one will hold four logos, and the second will be offset to the right with the same logos. You’ll see why we create two versions once we open up Motion.page.
Let’s add the first block and call it “Row 1.” Before adding the second block, I’ll explain how it works. If I duplicate Row 1 now, you’ll see the two blocks are stacked, which isn’t what we want.
On the wrapper, I’m going to add a class so we can use it in Motion.page. I’ll call this class m-wrapper. I want this layout to be horizontal, so I’ll set it to row direction. Now you can see they’re split 50/50, but that’s not the goal either. So on each row block, I’ll set the layout’s min-width to 100%. That goes for both rows.
You might notice overflow issues. The easiest fix is to go to the wrapper and set the overflow property to hidden. We can do this on the class. Now there’s no visible overflow, although the second row is still there—it’s just hidden.
I’ll delete one of the blocks for now, just to focus on styling the first one.
Inside Row 1, I’m going to set it up to have four columns using a utility class from Core Framework called columns-4. Now it’s split into four segments, and each logo will go into one of these.
Here’s a common issue: sometimes, when creating a marquee, the loop timing is off. That usually happens when people add a gap between items. I’ll demonstrate. If I add a gap-L, we now have spacing between logos. I’ll add some logos now to show you the issue.
I’m copying SVGs from logo.com into a code block and applying text-center to center them. Then I’ll copy the SVG block four times and replace each with a different logo.
I’ll also apply items-middle to vertically center them. Now if I duplicate this entire row, we’ve essentially got two identical rows. On the wrapper, I’ll add a gap-L so the gap is consistent. You won’t see it due to overflow: hidden, but it’s there.
Let’s open Motion.page and create a new timeline. I’ll call it “Marquee” and target the Marquee page. I want this animation to run continuously on page load. I’ll target the .m-wrapper class and the two child rows using a wildcard selector.
I’ll animate them by translating on the X axis -100% and set the easing to none. It will scroll quickly for now, but we’ll adjust that.
Set the animation to repeat infinitely by using repeat: -1.
Now here’s what I was talking about—the snapping effect when it loops. That’s because of the gap. The gap breaks the seamlessness. To fix it, we wrap each logo in its own block and apply padding instead of a gap between columns.
So, I’ll delete one of the rows and wrap each logo in its own block. I’ll add a class called marquee-logo-wrapper to each of these and apply padding using CSS variables.
Now I’ll copy the styles to each wrapper block, then duplicate the row again so we have two. Save and refresh Motion.page, and now the scroll should be much smoother.
I’ll slow it down to around 15 seconds to make it a more subtle effect.
Next, I’ll duplicate the wrapper so we can scroll in the opposite direction. For clarity, I’ll rename the wrappers and rows.
-
marquee-wrapper-left
-
marquee-wrapper-right
-
Rows renamed accordingly
Make sure overflow: hidden is applied to both wrappers. Before we do that, we need to offset the right-scrolling row to the left by setting justify-content: end.
Now the second row appears correctly on the right-hand side. Save and return to Motion.page.
Back in Motion.page, the top row will scroll left. We’ll duplicate that animation for the second row and change the value from -100% to 100% to scroll to the right.
Let’s preview it to confirm everything is smooth. Perfect.
One last touch I like to add is a gradient overlay for subtle fade effects. Inside the container, I’ll set its position to relative. Then I’ll add a block called overlay, make it absolute, and stretch it to fill the container with min-height: 100%.
I’ll add a gradient overlay to the overlay block. Set three color stops:
-
The middle one transparent
-
The two outer ones matching the background (e.g., bg-body)
Set the angle to 90 degrees, and it gives a nice soft gradient fade on the sides.
Let’s preview this on the frontend.
It looks great, but I think it’s still a bit fast. I’ll slow it down further to 30 seconds.
Save the timeline and refresh—it’s much better now.
That’s it for this tutorial. I hope you found it helpful. If you have any questions, let me know in the comments.
Before I go, I just want to let you know that in the next video, I’ll show you how to create something similar with testimonials that animate on scroll. The effect is a bit different but uses a similar concept.
If you’re interested, don’t forget to subscribe and hit the notification bell so you’re notified when the next tutorial is released.
Thanks again, and I’ll see you in the next one.
