Marquee for text and images in Bricks (ideally for the nested Slides)

[Soluna]

Coming from Elementor I can pretty much write here what I wrote on the Elementor github as a request.

Our company keeps getting requests for marquee effects for pretty much every website. Whether it´s for simple text, for images or for other content. On almost all of our Elementor websites there has been at least one marquee section so far and because Elementor doesn´t have an option for that we always had to rely on 3rd party plugins which is not rlly the best thing cause installing a plugin just for a simple marquee like that always bloats the whole website.

Now that we´re moving from Elementor to Bricks it´s unfortunately pretty much the same thing… There are 3rd party tools that can do that but it´s still a 3rd party tool that you have to buy and install just for this effect…

I´d be great if Bricks had an option to do this natively. And I know that there are ways to somehow make it work with native Bricks but trust me… All the options that I´ve found so far don´t work perfectly. Either they are very limited when it comes to styling or options or they don´t work well for all devices.

The solution that was shared here

Small animations under bricks

hello, this topic is simple , I identified in this webflow template two elements that intrigue me : 1 - the text slide and 2- tab animations (icon and content text) I can’t clearly identify if it’s css or script for the text slide I think it’s css but I can’t reproduce it [image] for the tabs it seems to me that it is playable with bricks but, but I am lost between using interaction or pure css [image] in any case I have not succeeded in reproducing them on bricks. if someone nice …

doesn´t work well either. I really appreciate these tutorials but it´s pretty much the same that the devs of https://motion.page/ told me: It kind of works but it´s not great. The marquee content is “jumping” sometimes or the content is stretched when you resize the window or there are other issues with these solutions. That´s why I´d love to have a very robust solution in Bricks.

What I´m talking about is this:

Elementor Text Marquee Widget

Logo Marquee - Unlimited Elements for Elementor

What would be great to have there are options for the space between the single items, for the marquee speed, the direction (left to right, right to left, top to bottom or bottom to top, or even diagonally) and of course the basic stylings like border for the items, padding, etc…

To name just a few use cases where our company desperately needed this:

• logo marquee (link above) where client or partner logos are displayed
• text marquee for promotions (for a local snack bar the client wanted to have a marquee banner with “Hamburger: only 5,70€!!!” right below the hero image
• marquee with client reviews

As you can see, the marquee effect seems to be pretty popular amongst our clients. Having an option to do this natively within Bricks with all the options mentioned above would be highly appreciated!

Thanks a lot in advance!

[Pope2108]

A marquee element would be nice.

[Soluna]

I managed to make this work with the help of Fancybricks (https://fancybricks.co/) . It´s a great collection of Bricks Layouts and I can highly recommend it! Everything is built just with Bricks and nothing else and they have different marquee in their collection which all work perfectly!

[amigosmios77]

Its absolutely true, that nowadays “everybody” wants a marquee on their page. I can understand why, it looks nice.

On elementor i never could it get work 100%, something was always buggy.

On bricks i had to use the https://brickscore.io plugin. It most probably does the same as fancybricks.

[MartinWB]

Guys you may use bit of CSS without a need of new element. Take look let say here or you may go dirty with bit of code like so. No need for extra plugin.

[Soluna]

Thanks for the links! There are many options to create a marquee and some are better and some are worse. Some don´t work very well, especially the ones that only use CSS. They´re sometimes laggy or the marquee isn´t really infinite but “jumps”. And there are other advantages of using Javascript solutions for this over pure CSS such as more flexibility and control or performance. CSS animations rely on the rendering-engine of the browser and if the browser isn´t fast enough to render the frames then this can lead to lagging animations / a lagging marquee.

And as @amigosmios77 already mentioned correctly: In Elementor there was never a solution that worked perfectly. The only way to get that done was by using external plugins or full custom code with Javascript.
Also (not 100% sure though if that´s correct): I´ve heard multiple times from devs in our agency that pure CSS marquee is deprecated and/or not really best practice anymore which is probably why most solutions like the one from Fancybricks or Brickscore use Javascript.

But yea… After years of working with Elementor and now having migrated to Bricks I can definitely say that I´ve already tried many marquee solutions in Elementor and none of them have worked which is why I´m sceptical that they work in Bricks.

[amigosmios77]

We all tried them, we all broke on them.

[ChrisBeattie]

Quite simple to do with a little code. Here’s one I made, it only uses a little Javascript, and also has pause on hover.

HTML

<div class="marquee-container">
  <div class="marquee">
    <span>Here's some text</span>
    <span>Here's some more text</span>
    <span><a href="/your-link">Here's a link</a></span>
  </div>
</div>

CSS

.marquee-container {
  width: 100%;
  overflow: hidden;
  background: #212121;
  white-space: nowrap;
  padding: 10px 0;
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-animation 50s linear infinite;
  pointer-events: all;
}

@media (max-width:991px) {
  .marquee {
    animation: marquee-animation 45s linear infinite;
  }
}

@media (max-width:767px) {
  .marquee {
    animation: marquee-animation 35s linear infinite;
  }
}

@media (max-width:478px) {
  .marquee {
    animation: marquee-animation 30s linear infinite;
  }
}

.marquee:hover {
  animation-play-state: paused;
}

.marquee span {
  display: inline-block;
  padding: 0 2rem;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  position: relative;
  user-select: none;
}

.marquee span::after {
  content: '·';
  position: absolute;
  right: -0.5rem;
  font-size: 22px;
  color: #fff;
}

.marquee span:last-child::after {
  content: '';
}

.marquee span a {
  text-decoration: underline;
  cursor: pointer;
}

@keyframes marquee-animation {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

JS

document.addEventListener('DOMContentLoaded', () => {
    const marquee = document.querySelector('.marquee');
    const containerWidth = document.querySelector('.marquee-container').offsetWidth;
    const contentWidth = marquee.scrollWidth;

    const duplicates = Math.ceil(containerWidth / contentWidth);

    for (let i = 0; i < duplicates; i++) {
        marquee.innerHTML += marquee.innerHTML;
    }
});

[alvarin]

worked fine!
Thx so much

[echtprallerpavian]

Unfortunately it doesnt seem to work with images.

i tried it in 2 ways:

First one (build the structure):

Result (marquee is jumping every few seconds):

Second try:
code block: Inserted html:

//

//

Result (marquee is jumping every few seconds):